Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font-Awesome css not working locally

I would like to use Font Awesome locally without using the cdn.

My code fails to add font awesome icons to my page.

I can make it work easily using the cdn link but the local link fails to do anything.

Thanks

Jason.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>How it Works | Rubberdesk </title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Font-Awesome CSS -->
    <link href="/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
like image 697
Jason White Avatar asked Feb 18 '15 14:02

Jason White


People also ask

Why is Font Awesome not working?

If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.

How do I make Font Awesome work offline?

Go to font awesome official website and download free zip file, extract it and link this to your page, done..! To be able to use font awesome offline you would have to manually download the icons to your local computer.


2 Answers

Writing this may be helpful for someone like me :

Actual folder of font-awesome.min.css is public/css/font-awesome.min.css

In font-awesome.min.css file font-family source refers to URL *'../fonts/fontawesome-webfont.eot'. So following files must be located in public/fonts/

  1. FontAwesome.otf
  2. fontawesome-webfont.eot
  3. fontawesome-webfont.svg
  4. fontawesome-webfont.ttf
  5. fontawesome-webfont.woff
  6. fontawesome-webfont.woff2
like image 145
user170851 Avatar answered Sep 20 '22 14:09

user170851


Check the path is right and placed in right folder

try this code

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>How it Works | Rubberdesk </title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font-Awesome CSS -->
    <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
  • check path
  • check path in bootstrap.min.css are all same

It will look same as in question try this

like image 26
sanoj lawrence Avatar answered Sep 18 '22 14:09

sanoj lawrence