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. <pre class="prettyprint"><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>  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"> </code></pre>

Check the path is right and placed in right folder try this code <pre class="prettyprint"><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>  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"> </code></pre> <ul> <li>check path</li> <li>check path in bootstrap.min.css are all same</li> </ul> It will look same as in question try this

Font-Awesome css not working locally

Tags:

html

css

twitter-bootstrap

font-awesome

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

697

asked Feb 18 '15 14:02

Jason White

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/

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2

145

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

answered Sep 18 '22 14:09

sanoj lawrence

Related questions
                            
                                how to get clicked element in THREE.js
                            
                                How to style every other item in a list as bold?
                            
                                Unable to remove CSS bullets from list
                            
                                Set IFrame allowfullscreen with javascript
                            
                                Remove top border of first child and bottom border of last child in CSS
                            
                                Google Chrome: Vertical scrollbar disappears on some web pages, maybe due to a strange toolbar
                            
                                ClojureScript and HTML entities
                            
                                CSS tooltips won't stretch, can only have fixed width
                            
                                gradient text in css with text shadow
                            
                                What does exclamation point stand for in HTML in constructs like DOCTYPE and comments?
                            
                                prevent full page scrolling iOS
                            
                                CSS, Text overflows out of table cell
                            
                                How to put div inside input type text
                            
                                Using html templates in angular's ng-switch
                            
                                CSS selector for custom data-attribute?
                            
                                Bootstrap 3 modal is closed when enter is pressed, but form is not submitted
                            
                                CSS-Image border glow when hover with individual color
                            
                                How to change style of radio and checkbox input [duplicate]
                            
                                Making my background images load faster
                            
                                How to make a "<input type="file" />" looks like a link with CSS?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With