how to use font awesome in own css

Question

I m using bootstrap and Font Awesome  In a custom css class I m working on I tried to include Font Awesome icons instead of using images  Here is my code before Font Awesome    data  close     display  block    float  right    width  30px    height  30px    background  url    img close png  top right no-repeat    text-align  right    outline  none    filter  progid DXImageTransform Microsoft Alpha Opacity 70     opacity  0 7      next     right  0    float  right      next hover     background  url    img next png  right 48  no-repeat      Here is my code using Font Awesome  which obviously doesn t work  The icons don t show  Any idea what I m doing wrong    data  close     display  block    float  right    width  30px    height  30px    font-family  FontAwesome   content    f00d     text-align  right    outline  none    filter  progid DXImageTransform Microsoft Alpha Opacity 70     opacity  0 7       next     right  0    float  right      next hover     font-family  FontAwesome   content    f054       html header   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt meta charset  utf-8    gt     lt title gt test lt  title gt     lt link rel  stylesheet  href    font-awesome css font-awesome css  gt   lt  head gt                here is a fiddle of what i m working on

User · Answer

The spirit of Web font is to use cache as much as possible, therefore you should use CDN version between <head></head> instead of hosting yourself:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Also, make sure you loaded your CSS AFTER the above line, or your custom font CSS won't work.

Reference: Font Awesome Get Started

User · Answer

Instructions for Drupal 8   FontAwesome 5  Create a YOUR THEME NAME HERE THEME file and place it in your themes directory  ie  your site name themes your theme name   Paste this into the file  it is PHP code to find the Search Block and change the value to the UNICODE for the FontAwesome icon  You can find other characters at this link https   fontawesome com cheatsheet     lt  php function YOUR THEME NAME HERE form search block form alter  amp  form   amp  form state       form  keys     attributes    placeholder       t  Search       form  actions    submit     value     html entity decode   amp  xf002         gt    Open the CSS file of your theme  ie  your site name themes your theme name css styles css  and then paste this in which will change all input submit text to FontAwesome  Not sure if this will work if you also want to add text in the input button though for just an icon it is fine   Make sure you import FontAwesome  add this at the top of the CSS file    import url  https   use fontawesome com releases v5 0 9 css all css      then add this in the CSS  input edit-submit       font-family   Font Awesome  5 Free       background-color  transparent      border  0        FLUSH ALL CACHES AND IT SHOULD WORK FINE  Add Google Font Effects  If you are using Google Web Fonts as well you can add also add effects to the icon  see more here https   developers google com fonts docs getting started enabling font effects beta   You need to import a Google Web Font including the effect s  you would like to use first in the CSS so it will be    import url  https   fonts googleapis com css family Open Sans 400 800 amp effect 3d-float     import url  https   use fontawesome com releases v5 0 9 css all css      Then go back to your  THEME file and add the class for the 3D Float Effect so the code will now add a class to the input  There are different effects available  So just choose the effect you like  change the CSS for the font import and the change the value FONT-EFFECT-3D-FLOAT int the code below to font-effect-WHATEVER EFFECT HERE  Note effects are still in Beta and don t work in all browsers so read here before you try it https   developers google com fonts docs getting started enabling font effects beta   lt  php function YOUR THEME NAME HERE form search block form alter  amp  form   amp  form state       form  keys     attributes    placeholder       t  Search       form  actions    submit     value     html entity decode   amp  xf002        form  actions    submit     attributes    class        font-effect-3d-float       gt

User · Answer

you can do so by using the  before or  after pseudo  read more about it here http   astronautweb co snippet font-awesome   change your code to this   lb-prev hover     filter  progid DXImageTransform Microsoft Alpha Opacity 100     opacity  1     text-decoration  none      lb-prev before       font-family  FontAwesome      content    f053       font-size  30px      do the same for the other icons  you might want to adjust the color and height of the icons too  anyway here is the fiddle hope this helps

User · Answer

Try this way  In your css file change font-family  FontAwesome into font-family   FontAwesome   or font-family   FontAwesome    I ve solved the same problem using this method

[css] how to use font awesome in own css?

Examples related to css

Examples related to twitter-bootstrap

Examples related to font-awesome