Use Font Awesome Icons in CSS

Question

I have some CSS that looks like this     content h2      background  url    images tContent jpg  no-repeat 0 6px      I would like to replace the image with an icon from Font Awesome   I do not see anyway to use the icon in CSS as a background image  Is this possible to do assuming the Font Awesome stylesheets fonts are loaded before my CSS

User · Answer

You can try this example class  and find icon content here  http   astronautweb co snippet font-awesome      content h2 before       display  inline-block      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       content    f007

User · Answer

content h2 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

Consolidating everything above  the following is the final class which works well      faArrowIcon           position relative              faArrowIcon before           font-family  FontAwesome          top 0          left -5px          padding-right 10px          content    f0a9

User · Answer

I am bit late to the part  Just like to suggest another way    button calendar  before       content    f073       font-family   Font Awesome 5 Free       left  -4px      bottom  4px      position  relative       position left and bottom is used to align icon  Sometimes adding font-weight 600 or above also helps

User · Answer

You can t use text as a background image  but you can use the  before or  after pseudo classes to place a text character where you want it  without having to add all kinds of messy extra mark-up   Be sure to set position relative on your actual text wrapper for the positioning to work    mytextwithicon       position relative         mytextwithicon before       content    25AE       this is your text  You can also use UTF-8 character codes as I do here        font-family  FontAwesome      left -5px      position absolute      top 0       EDIT   Font Awesome v5 uses other font names than older versions    For FontAwesome v5  Free Version  use  font-family   Font Awesome 5 Free  For FontAwesome v5  Pro Version  use  font-family   Font Awesome 5 Pro    Note that you should set the same font-weight property  too  seems to be 900    Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name  same way the utf-8 icon code can be found  but note that you can find it out on  before

User · Answer

For this you just need to add content attribute and font-family attribute to the required element via  before or  after wherever applicable   For example  I wanted to attach an attachment icon after all the a element inside my post  So  first I need to search if such icon exists in fontawesome  Like in the case I found it here  i e  fa fa-paperclip  Then I would right click the icon there  and go the   before pseudo property to fetch out the content tag it is using  which in my case I found to be  f0c6  Then I would use that in my css like this       post a after        font-family  FontAwesome       content     f0c6     I added a space before   for better UI

User · Answer

Further to the answer from Diodeus above  you need the font-family  FontAwesome rule  assuming you have the  font-face rule for FontAwesome declared already in your CSS   Then it is a matter of knowing which CSS content value corresponds to which icon    I have listed them all here  http   astronautweb co snippet font-awesome

User · Answer

Use the following Python program via command line to create png images from Font-Awesome icons   https   github com Pythonity font-awesome-to-png

User · Answer

Alternatively  if using Sass  one can  extend  FA icons to display them    mytextwithicon before      extend  fas   fa-angle-double-right      extend  mr-2     using bootstrap to add a small gap                     between the icon and the text

User · Answer

To use font awesome using css follow below steps -   step 1 - Add Fonts of FontAwesome in CSS    Font Awesome Fonts    font-face       font-family   FontAwesome         in url add your folder path of FontAwsome Fonts     src  url  font-awesome fontawesome-webfont ttf   format  truetype        Step - 2 Use below css to apply font on class element of HTML   sorting asc after       content    f0de      this is your text  You can also use UTF-8 character codes as I do here        font-family  FontAwesome      padding-left  10px  important      vertical-align  middle      And finally  use  sorting asc  class to apply the css on desired HTML tag element

User · Answer

Actually even font-awesome CSS has a similar strategy for setting their icon styles   If you want to get a quick hold of the icon code  check the non-minified font-awesome css file and there they are    each font in its purity

User · Answer

No need to embed content into the CSS  You can put the badge content inside the fa element  then adjust the badge css  http   jsfiddle net vmjwayrk 2    lt i class  fa fa-envelope fa-5x  style  position relative color grey   gt     lt span style           background-color  navy          border-radius  50           font-size   25em          display block          position absolute          text-align  center          line-height  2em          top  - 5em          right  - 5em          width  2em          height  2em          border solid 4px  fff          box-shadow 0px 0px 1px  000          color   fff        gt 17 lt  span gt   lt  i gt

[css] Use Font Awesome Icons in CSS

Examples related to css

Examples related to font-awesome