2

I am trying to use some FontAwesome icons like this:

.THIS ul.ks-cboxtags li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    padding: 2px 6px 2px 2px;
    content: "\f000"; //THis is I am trying to use
    transition: transform .3s ease-in-out;
}

However, I am not able to load icons I have downloaded the zip from FontAwesome website,and uploaded it as the static resource.

and then used this

<ltng:require styles="{!$Resource.FontAwesome}" />
1

You need to import "Font Awesome" into your css after you upload it as a static resource.

It should look similar to this:

@font-face {
    font-family: 'myFontAwesome';
    src: url('resource/FontAwesome/fontawesome-free-5.13.0-web/webfonts/fa-regular-400.woff') format('woff');
}

.THIS ul.ks-cboxtags li label::before {
    font-family: myFontAwesome;
    content: "\f000";
    font-size: 12px;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 900;
    padding: 2px 6px 2px 2px;
    transition: transform .3s ease-in-out;
}

In the above example inside @font-face you choose what to name the font-family. I set it to 'myFontAwesome'. That's a name you give to the font after you reference it. You can call it anything you want. However when you reference the font-family: in your .THIS ul.ks-cboxtags li label::before element later you need to give it the exact same name you chose when you imported the font.

14
  • so... I don't have the fonts folder, so I used webfonts folder... I have some woff files. I am trying this..............src: url('resource/fontAwesome/fontawesome-free-5.13.0-web/webfonts/fa-regular-400.woff') format('woff'); – mvk1991 Jun 5 '20 at 17:14
  • What name did you give to your static resource when you uploaded font awesome? – Arthlete Jun 5 '20 at 17:16
  • FontAwesome... this is the name I gave – mvk1991 Jun 5 '20 at 17:19
  • I am not sure if this will matter but try changing the src to src: url('resource/FontAwesome/fontawesome-free-5.13.0-web/fonts/font-awesome-webfont.woff') format('woff'); See in the original example I had resource/fontAwesome, camelcase. Try to change that to FontAwesome like the name you gave your static resource. – Arthlete Jun 5 '20 at 17:20
  • there is no fonts folder, there is webfonts folder, but it doesn't have the file you mentioned – mvk1991 Jun 5 '20 at 17:22
1

To use Font Awesome icons with Aura components:

  1. Create the static resource: in Static Resources create a new resource. For example, "FontAwesomeFree", and upload the zip file from Font Awesome. Keep in mind that the maximum file size is 5Mb, so you might have to re-compress it.

  2. In the component require the all.css file. You need to specify the path to the file inside the zip file like this:

 <ltng:require styles="{!$Resource.FontAwesomeFree + '/fontawesome/css/all.css'}" />

Here is the Resources reference.

  1. Then you can use the icons like:
<i class="fab fa-facebook-square"></i>
0

I ended up using this:

https://emojipedia.org/

Problem is my other question is unncessarily closed. my question there was simple, how to use lightning icons in the css file of the lightning component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.