CODEWITHSUNDEEP
cssfont-awesome
L84
L84

Reputation: 46298

Use Font Awesome Icons in CSS

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?

Upvotes: 337

Views: 664332

Answers (13)

xgmexgme
xgmexgme

Reputation: 139

If your only option is to change background-image like mine, this is what worked for me:

  1. From fontawesome's webpage, click the icon, select svg and copy.

  2. Fontawesome icons don't have color, you need to change the color as explained here: How can I change the color of an 'svg' element?

Basically, in your svg, replace

<path d="...">

with

<path fill="#AB7C94" d="...">

with the color your desire

  1. Now your problem is "how to use an svg as a background-image, which is neatly explained here: Using SVG as background image

In summary, encode your svg in a tool like this, and use data:image/svg+xml in the background-image attribute's value.

it should look like this:

.my-class {
   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3....");
}

This worked like a charm!

A concrete example:

  1. I needed to use this: https://fontawesome.com/icons/microchip?s=solid so I copied its svg
  2. Added white filling
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#FFFFFF" d="M176 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c-35.3 0-64 28.7-64 64l-40 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l40 0 0 56-40 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l40 0 0 56-40 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l40 0c0 35.3 28.7 64 64 64l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40 56 0 0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40 56 0 0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40c35.3 0 64-28.7 64-64l40 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0 0-56 40 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0 0-56 40 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0c0-35.3-28.7-64-64-64l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40-56 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40-56 0 0-40zM160 128l192 0c17.7 0 32 14.3 32 32l0 192c0 17.7-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32l0-192c0-17.7 14.3-32 32-32zm192 32l-192 0 0 192 192 0 0-192z"/></svg>
  1. Encoded in that tool:
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202024%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M176%2024c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c-35.3%200-64%2028.7-64%2064l-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200c0%2035.3%2028.7%2064%2064%2064l0%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40c35.3%200%2064-28.7%2064-64l40%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200c0-35.3-28.7-64-64-64l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40zM160%20128l192%200c17.7%200%2032%2014.3%2032%2032l0%20192c0%2017.7-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32l0-192c0-17.7%2014.3-32%2032-32zm192%2032l-192%200%200%20192%20192%200%200-192z%22%2F%3E%3C%2Fsvg%3E

Here's my final css:

background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202024%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M176%2024c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040c-35.3%200-64%2028.7-64%2064l-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200%200%2056-40%200c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024l40%200c0%2035.3%2028.7%2064%2064%2064l0%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40%2056%200%200%2040c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-40c35.3%200%2064-28.7%2064-64l40%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200%200-56%2040%200c13.3%200%2024-10.7%2024-24s-10.7-24-24-24l-40%200c0-35.3-28.7-64-64-64l0-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40c0-13.3-10.7-24-24-24s-24%2010.7-24%2024l0%2040-56%200%200-40zM160%20128l192%200c17.7%200%2032%2014.3%2032%2032l0%20192c0%2017.7-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32l0-192c0-17.7%2014.3-32%2032-32zm192%2032l-192%200%200%20192%20192%200%200-192z%22%2F%3E%3C%2Fsvg%3E");

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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 markup.

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 (the same way the utf-8 icon code can be found, but note that you can find it out on :before).

Upvotes: 544

Arun s
Arun s

Reputation: 945

This seems to be the simplest solution :-)

#content h2:before {
   font-family: FontAwesome;
   content: "\f055";
   position:absolute;
   left:0;
   top:0;
}

Upvotes: 0

lsmpascal
lsmpascal

Reputation: 780

It seems that the given answers don't give a real background as the fontawesome is rendered outside the bloc you want the background in. Here is my solution to have a "real" background effect :

enter image description here

html :

<div id="bloc" class="bg_ico_outer" style="">
    <i class="fa fa-bookmark-o bg_ico"></i>
    <div class='bloc_inner'>
        <h2>test fontawesome as background</h2>
    </div>
</div>

css :

.bg_ico {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 17em;
    color: green;
    transform: rotate(25deg);
}

.bg_ico_outer{position: relative; overflow: hidden;}

#bloc{
    height: 200px;
    width:200px;
    background: blue;
    margin:50px auto;
}
.bloc_inner{
    position: absolute;
}
h2{color: white;}

Upvotes: 2

Pankaj Salunkhe
Pankaj Salunkhe

Reputation: 305

I am bit late to the party. 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 are used to align the icon.

Sometimes adding font-weight: 600 or above also helps.

Upvotes: 6

Shiv Singh
Shiv Singh

Reputation: 7201

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";
    }

Upvotes: 8

Pervez
Pervez

Reputation: 576

#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

Upvotes: 3

Ravindra Vairagi
Ravindra Vairagi

Reputation: 1083

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.

Upvotes: 12

Hiura
Hiura

Reputation: 3530

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.
}

Upvotes: 2

Animesh Singh
Animesh Singh

Reputation: 9282

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 */
    }

Upvotes: 0

Aakash
Aakash

Reputation: 23717

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.

Font-Awesome CSS File screenshot

Upvotes: 26

Lakshman Pilaka
Lakshman Pilaka

Reputation: 1951

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"; 
    }

Upvotes: 23

George Hix
George Hix

Reputation: 61

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/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <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;
    ">17</span>
</i>

Upvotes: 2

Related Questions