0

I want to know, how can I use the font awesome's offline icons with :before or :after pseudo in CSS? If I use CDN instead of offline then it Works perfectly but not with offline files.

.mydiv::before {
    content: "\25AE";  
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;
 }
user14598597
  • 1
  • 1

2 Answers2

3

How to set it up depends on your solution. Are you using simple CSS or any CSS preprocessors?

Let's assume you are using simple CSS:

  1. Download and extract the package
  2. Copy two folders: /webfonts and /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets).
  3. Link it in the head tag of every HTML page that you need

like this:

<head>
    <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
</head>

For more info, take a look at the official guide on how to host it by yourself: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

GBra 4.669
  • 1,512
  • 3
  • 11
  • 23
  • It works fine when I use it with Html file like `` but it's not work when I use it with css file using `:before` or `:after` pseudo. – user14598597 Jan 09 '21 at 14:33
  • I will try to set it up and let you know – GBra 4.669 Jan 09 '21 at 14:39
  • It's most likely a problem with the "content" property of the ::before o ::after element. Take a look at this: https://stackoverflow.com/questions/50559526/how-to-add-the-font-awesome-icon-in-after-before-elements – GBra 4.669 Jan 09 '21 at 14:48
0

Download required file from Font Awesome website https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

  • Create a new folder /fonts/
  • Unzip the download into this folder.
  • Then add <link href="fonts/css/all.css" rel="stylesheet"> in the <head> section.

It is easy to use them in your webpage, for examples see https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

bron
  • 1,457
  • 1
  • 9
  • 18