This is a quick and easy tip. At nvision, we’re pretty big fans of the amazing font icon library font awesome. Vector-based font icons are a key asset in any front-end developers arsenal nowadays.
On Font Awesome’s website, they will ask you to include the library in your project, which you can do in a few ways. I suggest just using their CDN for a quick and easy integration by putting this in the <head> of your document.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
To render an icon from their library, you typically would do something like:
<i class="fa fa-rocket fa-5x"></i>
which would show as:
Thats all fine and dandy but what if you want to use one of their icons as a bullet on a list? or use their link icon beside an anchor?, or use their social icons beside the url’s of their accounts?
the simplest and easiest approach is to use either a :before or :after pseudo CSS class and call your icon via CSS (or SCSS in our case).
take this list for example:
HTML:
<ul class="fontawesome"> <li class="search">Search</li> <li class="link">Link</li> <li class="facebook">Facebook</li> <li class="right-arrow">Right Arrow</li> </ul>
take a look at my .scss syntax:
ul.fontawesome {
list-style: none;
li {
position:relative;
font-size: 26px;
line-height:2.5;
}
li:before {
position:absolute;
color: tomato;
left: -30px;
font-family: "FontAwesome";
}
.search:before {
//you can reference all the unicodes (f002) for each font at http://fontawesome.io/icons/
content: "f002";
}
.link:before {
content: "f0c1";
}
.facebook:before {
content: "f09a";
}
.right-arrow:before {
content: "f0a9";
}
}
would render like:
1
OR how about a Button?
0
The examples on this page use SASS (.scss syntax) with the compass framework 🙂
