Use Font Awesome icon as CSS content

Question

I want to use a Font Awesome icon as CSS content  i e    a before       content    lt i class  fa     gt     lt  i gt        I know I cannot use HTML code in content  so is it only images left

User · Answer

Another solution without you having to manually mess around with the Unicode characters can be found in Making Font Awesome awesome - Using icons without i-tags (disclaimer: I wrote this article).

In a nutshell, you can create a new class like this:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

And then use it with any icon, for example:

<a class="icon fa-car" href="#">This is a link</a>

User · Answer

Update for FontAwesome 5 Thanks to Aurelien  You need to change the font-family to Font Awesome 5 Brands OR Font Awesome 5 Free  based on the type of icon you are trying to render  Also  do not forget to declare font-weight  900   a before      font-family   Font Awesome 5 Free      content    f095      display  inline-block     padding-right  3px     vertical-align  middle     font-weight  900      Demo  You can read the rest of the answer below to understand how it works and to know some workarounds for spacing between icon and the text     FontAwesome 4 and below  That s the wrong way to use it  Open the font awesome style sheet  go to the class of the font you want to use say fa-phone  copy the content property under that class with the entity  and use it like   a before       font-family  FontAwesome      content    f095       Demo  Just make sure that if you are looking to target a specific a tag  then consider using a class instead to make it more specific like   a class name before       font-family  FontAwesome      content    f095       Using the way above will stick the icon with the remaining text of yours  so if you want to have a bit of space between the two of them  make it display  inline-block  and use some padding-right   a before       font-family  FontAwesome      content    f095       display  inline-block      padding-right  3px      vertical-align  middle        Extending this answer further  since many might be having a requirement to change an icon on hover  so for that  we can write a separate selector and rules for  hover action   a hover before       content    f099      Code of the icon you want to change on hover        Demo  Now in the above example  icon nudges because of the different size and you surely don t want that  so you can set a fixed width on the base declaration like  a before          Other properties here  look in the above code snippets        width  12px     add some desired width here to prevent nudge        Demo

User · Answer

You can use unicode for this in CSS  If you are using font awesome 5  this is the syntax    login  before       font-family   Font Awesome 5 Free        font-weight  900       content    f007         You can see their documentation here

User · Answer

a before        content    f055        font-family  FontAwesome       left 0       position absolute       top 0      Example Link  https   codepen io bungeedesign pen XqeLQg  Get Icon code from  https   fontawesome com cheatsheet from io

User · Answer

As it says at FontAwesome website FontAwesome     HTML    lt span class  icon login  gt  lt  span gt  Login lt  li gt    CSS     icon  before       display  inline-block      font-style  normal      font-variant  normal      text-rendering  auto      -webkit-font-smoothing  antialiased            login  before           font-family   Font Awesome 5 Free           font-weight  900          content    f007          In  login  before -  edit content     to suit your unicode

User · Answer

Here s my webpack 4   font awesome 5 solution   webpack plugin   new CopyWebpackPlugin         from   node modules font-awesome fonts   to   font-awesome            global css style    font-face       font-family   FontAwesome       src  url   font-awesome fontawesome-webfont eot        src  url   font-awesome fontawesome-webfont eot  iefix   format  embedded-opentype        url   font-awesome fontawesome-webfont woff2   format  woff2        url   font-awesome fontawesome-webfont woff   format  woff        url   font-awesome fontawesome-webfont ttf   format  truetype        url   font-awesome fontawesome-webfont svgfontawesomeregular   format  svg        font-weight  normal      font-style  normal     i       font-family   FontAwesome

User · Answer

If you have access to SCSS files from font-awesome  you can use this simple solution    a after          Import mixin from font-awesome scss mixins scss      include fa-icon            Use icon variable from font-awesome scss variables scss     content   fa-var-exclamation-triangle

User · Answer

You should have font-weight set to 900 for Font Awesome 5 Free font-family to work   This is the working one    css-selector  before      font-family   Font Awesome 5 Free      content    f101      font-weight  900

User · Answer

Update for Font Awesome 5 using SCSS   icon      extend  fa-icon     extend  fas      amp  before       content  fa-content  fa-var-user

[html] Use Font Awesome icon as CSS content

Examples related to html

Examples related to css

Examples related to font-awesome