CODEWITHSUNDEEP
htmlcssbootstrap-4iconsfont-awesome
Rajes
Rajes

Reputation: 103

Embed font awesome icon to external css file

How to embed Font Awesome icon to external css style sheet.

For Font Awesome 5 & free icon---

#preview .buttons .ok {
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 20px;

}
.ok:before {
    content: "\e900";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

Now try it..

Upvotes: 2

Views: 5951

Answers (3)

לבני מלכה
לבני מלכה

Reputation: 16251

\e900 does not exist in font awesome's icons...

It works good with other(like \f2b9)

See here the icons and copy unicode to css :https://fontawesome.com/icons?d=gallery

And put the link as below in your head tag

#preview .buttons .ok {
    border: 1px solid #F5F5F5;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 20px;

}
.ok:before {
    content: "\f2b9";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">


<div id='preview'>
    <div class='buttons'>
          <div class='ok'></div>
    </div>
</div>

Upvotes: 4

Nazmul Hossain Rana
Nazmul Hossain Rana

Reputation: 13

For Font Awesome 5 & free icon---

border: 1px solid #F5F5F5;
border-radius: 4px;
width: 28px;
height: 28px;
font-size: 20px;



content: "\e900"; 
display: inline-block; 
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);

Note: For font awesome 5 free icon this tag must be added on your external css file.

Now try it.

Upvotes: 1

Giorgos Georgantas
Giorgos Georgantas

Reputation: 72

In order to include Font Awesome , you need to include <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> on your html file then use it to css . Take a look to official , docs about font awesome .

Upvotes: 0

Related Questions