Today, icon fonts are quite common, and more and more developers are taking advantage of them in their designs. Icon fonts are simple fonts that contain symbols and glyphs instead of letters or numbers. They can be styled with CSS in the same way as ordinary text.
In this snippet, we’ll show how font awesome icon can be used as content.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="#">Here is a link</a>
</body>
</html>
body {
font-family: Arial;
font-size: 15px;
}
a {
text-decoration: none;
color: #000000;
}
a:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
Here is the result of our code.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
<style>
body {
font-family: Arial;
font-size: 15px;
}
a {
text-decoration: none;
color: #000000;
}
a:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
</style>
</head>
<body>
<a href="#">Here is a link</a>
</body>
</html>
In the example above, we replaced the content value with the corresponding unicode number. Note that there are common CSS properties that apply to all icons.
Let’s see one more example, where we used two icons inside a <li> tag.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
<style>
ul li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
}
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.facebook::before {
font-family: "Font Awesome 5 Brands";
font-weight: 900;
content: "\f082";
}
.twitter::before {
font-family: "Font Awesome 5 Brands";
content: "\f099";
}
</style>
</head>
<body>
<ul>
<li>
<span class="icon facebook"></span> Facebook
</li>
<li>
<span class="icon twitter"></span> Twitter
</li>
</ul>
</body>
</html>