Use FontAwesome or Glyphicons with css :before
What you are describing is actually what FontAwesome is doing already. They apply the FontAwesome font-family to the ::before
pseudo element of any element that has a class that starts with "icon-".
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
Then they use the pseudo element ::before
to place the icon in the element with the class. I just went to http://fortawesome.github.com/Font-Awesome/ and inspected the code to find this:
.icon-cut:before {
content: "\f0c4";
}
So if you are looking to add the icon again, you could use the ::after
element to achieve this. Or for your second part of your question, you could use the ::after
pseudo element to insert the bullet character to look like a list item. Then use absolute positioning to place it to the left, or something similar.
i:after{ content: '\2022';}
@keithwyland answer is great. Here's a SCSS mixin:
@mixin font-awesome($content){
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: $content;
}
Usage:
@include font-awesome("\f054");