Cannot get Font Awesome Images to Show


Tags: html,css,font-awesome

Problem :

Working on my footer and I wanted to add the social media icons (twitter, facebook and instagram). So I found font awesome, I followed all the steps but the icons are not showing up. I am not quite sure what I am missing, I am only getting little squares instead of the icons. Is anyone familiar with this that can help? Any help is great appreciated.

Here is the code:

HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <!--<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>

        <nav class="masthead-nav">
          <div class="nav-content">

            <ul class="links">
                <li class="active">Meet Karma</li>
                <li>How it Works</li>
                <li>Store</li>
                <li>Blog</li>
                <li>Help</li>
                <li>Login</li>
            </ul>
            <img class="logo" src="images/karma-logo.png" align="Karma" width="50px"></img></div>
          </div>
        </nav>

        <div class="intro">
            <div class="nav-content">
                <h1>Introducing Karma</h1>
                <h3>Bring WiFi with you, everywhere you go.</h3>
                <div class="buttons">
                    <button>Learn More</button>
                </div>
            </div>  
        </div>

        <section class="cases">
            <div class="nav-content">
                <h2>Everyone needs a little Karma</h2>
                <ul class="devices">
                    <li><img width="127px" height="127px" src="images/icon-devices.png" alt="Internet for all devices image"><div><h3>Internet for all devices</h3></div></li>
                    <li><img width="127px" height="127px" src="images/icon-coffee.png" alt="Boost your productivite image"><div><h3>Boost your productivity</h3></div></li>
                    <li><img width="127px" height="127px" src="images/icon-refill.png" alt="Pay as You Go image"><div><h3>Pay as You Go</h3></div></li>
                </ul>
                <!--  <ul>
                    <li>Internet for all devices</li>
                    <li>Boost your productivity</li>
                    <li>Pay as You Go</li>
                </ul>-->

            </div>
        </section>

        <footer class="social">
            <div class="nav-content">
                <hr>
                <h5>Join us on</h5>
                <ul class="icons">
                    <li class="twitter">
                        <i class="fa fa-twitter">::before</i>
                    </li>

                    <li class="facebook">
                        <i class="fa fa-facebook">::before</i>
                    </li>

                    <li class="instagram">
                        <i class="fa fa-instagram">::before</i>
                    </li>
                </ul>
                <span class="copy">
                    © Karma Mobility, Inc.
                </span>
            </div>
        </footer>   

    </body>
    </html>

CSS:

html {
box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: LightGray;
    font-family: 'Roboto', sans-serif;
}

div {
  /*  border: 1px solid Chocolate;*/
  display: block;
}

ul, ol {
    list-style: none;
}


.masthead-nav {
  background-color: #fff;
  height: 4.375rem;
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #DDD;
  z-index: 9999;/*large zindex to insure the nav stays on top of all elements*/
}

.masthead-nav > .nav-content { /* ask mentor how come the site did have these only had the height but not the width or margin  refer to: http://thinkful-ed.github.io/karma-clone/css/style.css;*/
    height: 70px;
    width: 970px;
    margin: 0 auto; /* centers .navcontent inside .masthead-nav */
}

.nav-content {
    padding: 0 0.938rem;
    margin: 0 auto;
    min-width: 37.5rem;
}

.nav-content .logo {
    border: 0;
    padding: 10px 10px;
}

.masthead-nav .links {
    float: right;
    font-family: 'Roboto', sans-serif;
    color: #838994;
    font-size: 16px;
    margin-top: 25px;
    -webkit-font-smoothing: antialiased;
}

.links li {
    display: inline;
    margin-left: 1rem;

}

.masthead-nav .links li.active {
    color: #4c5058;
    font-weight: 500;
}

.masthead-nav .links li:hover {
    cursor: pointer;
    color: #333333;
}

.intro {
    background-image: url("images/first-background.jpeg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 45.938rem;
    overflow: auto; /*to keep margin-top from pushing the parent element down*/
}

.intro h1 {
    margin-top: 17.5rem;
    font-size: 3.125rem;
}

.intro h1, .intro h3{
    color: white;
    text-align: center;
    font-weight: 300;
}

.intro h3 {
    margin-top: 1.25rem;
    font-size: 1.563rem;
    color: white;
}

.intro .buttons {
    color: white;
    text-align: center;
    margin-top: 1.563rem;
}

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
}

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

button {
    width: 9.688rem;
    background-color: #f15a29;
    text-shadow: none;
    border-style: none;
    border-radius: 4px;
    padding: 1rem 1.5rem;
    color: white;
    font-size: 1.125rem;
}

.cases {
    background-color: white;
    overflow: hidden;
    padding-bottom: 5rem;
}

.cases .nav-content {
    padding-top: 7.875rem;
    color: #1d1e21;
    text-align: center;
}

.cases h2 {
    font-family: 'Roboto', sans-serif;
    margin: 1.625rem 0 3.125rem;
    font-weight: 300;
    font-size: 2.75rem;
}

.cases .devices {
    width: 60%;
    display: inline-block;
    box-sizing: border-box;
}

.cases .devices > h3 {
    font-weight: 00;
    font-size: 1.563rem;
    margin: 2.5rem 0px 1.875rem;

}

.cases .devices > li {
    width: 33.3333333%;
    float: left;
}

.social {
    background-color: white;
    overflow: auto;
    padding-bottom: 9.375rem;
    text-align: center;
}

.social hr {
    width: 50%;
    border: 0;
    border-top: 1px solid #eaebec;

}

.social .icons > li {
    border-radius: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-block;
    margin: 1.25rem 5px;
    border: 1px solid #eaebec;
    padding: 0.625rem 0;
    text-align: center;
}

.social .twitter {
    color: #55acee;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-twitter:before {
    content: "\f099";
}

.fa-facebook:before {
    content: "\f09a";
}

.fa-instagram:before {
    content: "\f16d";
}

.social .copy {
    font-size: 0.9rem;
    font-weight: 300;
    color: #838994;
}


Solution :

if you want to host Font Awesome in your site, you do need to include the font's as well... opening the font-awesome.css file you will see that the font's should be placed at:

src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');

in you case, and looking that you placed your CSS in a css folder you should have:

-- yourPage.html
-- yourOtherPage.html
|--- css
   |--- font-awesome.min.css
|--- fonts
   |--- FontAwesome.eot
   |--- fontawesome-webfont.eot
   |--- fontawesome-webfont.woff
   |--- fontawesome-webfont.woff2
   |--- fontawesome-webfont.ttf
   |--- fontawesome-webfont.svg

you can always change the font's path, but you will to edit the css file, and remembering that once you "update" the file ...

why not just use the web version like you commented out?

here's a JSBin example using the maxcdn version:

http://jsbin.com/sezezitafo/1/edit?html,output


It's all very well explained in the website, first step says:

  1. Copy the entire font-awesome directory into your project.

Though you just need to copy the css and fonts folder to the root of your project (or change the path in the .css file)


    CSS Howto..

    How to following a link without modifying the displayed url and triggering css animation?

    How do I center bootstrap's carousel? Not the images, the carousel itself

    How to make a div hide properly on hover while trying to make a gif also start on hover

    How to align elements so CSS fixed doesnt overlap on page load

    How to create a sliding navigation with either jquery or css? [closed]

    I have a nav bar that changes the src of an iframe, how can i change the active link color?

    How to highlight table row on hover using CSS only?

    How to access an object from a webpage in selenium

    how to get double border in using CSS?

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to override default tag css to normal?

    How to display size and icon for pdf and word docs?

    how to set the css left property of a class on the basis of an ID of a tag

    How to horizontally repeat two different bg gradients to the entire page width?

    How to crop SVG file within HTML/CSS

    How to add a rollover effect to the text on a map

    How to place scroll bar on side of table?

    How to write media queries for HD/Retina Display in Landscape position?

    How to get smaller divs to stack to the right of larger divs?

    How to indent multiple levels of select optgroup with CSS?

    How to make this page less cluttered with css and html [closed]

    how to arrange 2 images side by side in mobile view?

    How can i achieve this style in Html/Css?

    How do I create CSS only tabs/pages with #hash URLs?

    how to give multiple colors in the same cell in a full calendar?

    CSS3 Keyframes how to make a image circle run without moving

    Google font - how to specific font-family If they have the same name?

    How to make my text appearing while scrolling website

    How to debug html code for which css is being applied? [duplicate]

    How to animate CSS Translate