how to use fontAwesome icon from css

Question

Can I use font-awesome icon with css? Now I have tried with html but on button I need to use as pseudo class like :after :before so can you help me?

ul li {
  display: inline-block;
}

.right {
  float: right;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note <i class="fa fa-plus"></i></button></li>
</ul>
<ul>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-book"></i></a></li>
  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>

can you explain plz? you are using icon right now, what is the issue ? — Temani Afif, Nov 02 '17 at 09:00
This button will generate from CMS so I can add code inside of button in html. But in CMS will generate class on it and I can implement from css too :) — , Nov 02 '17 at 09:02

score 3 · Accepted Answer · answered Nov 02 '17 at 09:14

You can use like this. I have updated your code.

ul li {
  display: inline-block;
}

.right {
  float: right;
}

button:after {
  content: "\f067";
  font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note</button></li>
</ul>
<ul>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-book"></i></a></li>
  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>

Temani Afif · Answer 2 · 2017-11-02T09:12:15.870

If you inspect element you will notice that you can use font awsome like this :

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
}
.my-icon {
    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;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

You need to be able to find the code of each icon in order to use them. You can simply do this by inspecting the element using that icon (in the website of font-awsome for example).

And you can also control the size of the icon by changing the font-size. Here is a big icon with red color :

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
    font-size: 32px;
    color:red;
}
.my-icon {
    display: inline-block;
    font: normal normal normal 24px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

score 1 · Answer 3 · answered Nov 02 '17 at 09:06

You just need to set FontAwesome font to the element and add pseudo-element with Unicode.

ul li {
   display: inline-block;
}

.right {
   float: right;
}

button {
    font: normal normal normal 14px/1 FontAwesome;
}
button:after {
    content: "\f217";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note</i></button></li>
</ul>

score 0 · Answer 4 · answered Nov 02 '17 at 09:09

0

span:before{
  content: "\f0c9";
  font-family: 'FontAwesome';
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<span>hello</span>

answered Nov 02 '17 at 09:09

koorosh safeashrafi

199
2
17

how to use fontAwesome icon from css

4 Answers4