CODEWITHSUNDEEP
csshtmlfont-awesomecdn
truthlies uchiha
truthlies uchiha

Reputation: 169

Font Awesome Icons in Offline

Is there any way to use this in offline?

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

I copy the link and save as font-awesome.min.css but still it is not working in offline like this link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"

enter image description here

Upvotes: 14

Views: 72794

Answers (7)

MrFiend
MrFiend

Reputation: 110

The best way Is to use svg instead of font awesome because if u look at it font awesome takes time to load which is a bad thing in 2022 as it just load fonts, you could perhaps just use svg which is quite faster and takes no time to load, you could use this website to get svg of any fonts and I'd recommend it as it is best free and gives you customized icons as well https://iconify.design/

Upvotes: 2

mostafa meerzad
mostafa meerzad

Reputation: 1

none of above solutions worked for me, But I recently found a solution for it in fontawesome's website it is simple and works well and I thought it worth sharing. Here it is:

<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> 
<!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

As you can see it imports all.css file

Upvotes: -1

Tums2212
Tums2212

Reputation: 1

You need the right version of those files. Assuming you only need the fonts & css for version 4.7.0.

DOWNLOAD

  1. Move fontawesome.css to your main directory and include it in your html file:
<link rel='stylesheet' href='./fontawesome.css'>
  1. Make a sub-folder called fonts and place the fonts (eot, woff2, svg, ttf) there.

That`s it.

Notes: Current fonts path in the fontawesome.css is :

src:url('./fonts/fontawesome-webfont.eot?v=4.7.0');src:url('./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('./fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('./fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('./fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');

You can move them anywhere you like but make sure to correct the paths.

Upvotes: 0

zenull
zenull

Reputation: 29

Here is all around solution for you:

  1. Download FontAwesome ZIP file
  2. Create an assets folder on your public_html (or your root folder)
  3. Extract all the content of font-awesome-4.7.0 into your assets folder
  4. Edit your HTML file head tag and add the following code (i.e. after all meta tags):

<link rel="stylesheet" href="./assets/css/font-awesome.min.css">

Upvotes: 3

Manu D.
Manu D.

Reputation: 407

The Fontawesome website itself documents how to download and use the icon kit offline here: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Upvotes: 4

user10753200
user10753200

Reputation:

  1. Download the font awesome free zip from the official site
  2. there is a folder called 'css', copy that folder into your project folder, (important) and also copy the folder named 'webfonts'
  3. then link the desired css file to html file (all.css or fontawesome.css or fontawesome.min.css) using the command
  4. then try your code, it will work

Upvotes: 10

Gigi
Gigi

Reputation: 526

Press the "Download free" button and make sure that you have the webfonts too. There is a web-fonts-with-css folder in the downloaded zip. Copy the fonts in your project and modify the paths for the fonts in your CSS to point to the location of the webfonts.

If you open the CSS linked in your questions you'll see that they have some imports with

url('../fonts/fontawesome-webfont.woff2?v=4.7.0')

modify these with the location of the fonts downloaded.

Upvotes: 7

Related Questions