Wordpress theme: The font awesome icons not displayed in WordPress

I have a wordpress theme and i wand to add genericons.

My problem is genericons not displayed in any browser:
enter image description here

This is my theme files tree:

enter image description here

This is the genericon.css code:

@font-face{font-family:'FontAwesome';src:url('wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont.eot?v=3.2.1');src:url('wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
    [class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}
    .icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em;}
    a [class^="icon-"],a [class*=" icon-"]{display:inline;}
    [class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em;}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em;}
    .icons-ul{margin-left:2.142857142857143em;list-style-type:none;}.icons-ul>li{position:relative;}
    .icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit;}
    [class^="icon-"].hide,[class*=" icon-"].hide{display:none;}
    .icon-muted{color:#eeeeee;}
    .icon-light{color:#ffffff;}
    .icon-dark{color:#333333;}
    .icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
    .icon-2x{font-size:2em;}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    .icon-3x{font-size:3em;}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
    .icon-4x{font-size:4em;}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
    .icon-5x{font-size:5em;}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
    .pull-right{float:right;}
    .pull-left{float:left;}
    [class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em;}
    [class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em;}
    [class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}
    .icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none;}
    .btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em;}
    .btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block;}
    .nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em;}
    .btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em;}
    .btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em;}
    .btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em;}
    .btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0;}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em;}
    .btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em;}
    .btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em;}
    .nav-list [class^="icon-"],.nav-list [class*=" icon-"]{line-height:inherit;}
    .icon-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.icon-stack [class^="icon-"],.icon-stack [class*=" icon-"]{display:block;text-align:center;position:absolute;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;}
    .icon-stack .icon-stack-base{font-size:2em;*line-height:1em;}
    .icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
    a .icon-stack,a .icon-spin{display:inline-block;text-decoration:none;}
    @-moz-keyframes spin{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(359deg);}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(359deg);}}@-o-keyframes spin{0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(359deg);}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(359deg);}}@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(359deg);}}.icon-rotate-90:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
    .icon-rotate-180:before{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
    .icon-rotate-270:before{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
    .icon-flip-horizontal:before{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1);}
    .icon-flip-vertical:before{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);}
    a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .icon-flip-horizontal:before,a .icon-flip-vertical:before{display:inline-block;}
    .icon-twitter:before{content:"f099";}
    .icon-facebook:before{content:"f09a";}
    .icon-github:before{content:"f09b";}
    .icon-unlock:before{content:"f09c";}
    .icon-credit-card:before{content:"f09d";}
    .icon-rss:before{content:"f09e";}
    .icon-hdd:before{content:"f0a0";}
    .icon-bullhorn:before{content:"f0a1";}
    .icon-bell:before{content:"f0a2";}
    .icon-certificate:before{content:"f0a3";}
    .icon-hand-right:before{content:"f0a4";}
    .icon-hand-left:before{content:"f0a5";}
    .icon-hand-up:before{content:"f0a6";}
    .icon-hand-down:before{content:"f0a7";}
    .icon-circle-arrow-left:before{content:"f0a8";}
    .icon-circle-arrow-right:before{content:"f0a9";}
    .icon-circle-arrow-up:before{content:"f0aa";}
    .icon-circle-arrow-down:before{content:"f0ab";}
    .icon-globe:before{content:"f0ac";}
    .icon-wrench:before{content:"f0ad";}
    .icon-tasks:before{content:"f0ae";}
    .icon-filter:before{content:"f0b0";}
    .icon-briefcase:before{content:"f0b1";}
    .icon-fullscreen:before{content:"f0b2";}
    .icon-group:before{content:"f0c0";}
    .icon-link:before{content:"f0c1";}
    .icon-cloud:before{content:"f0c2";}
    .icon-beaker:before{content:"f0c3";}
    .icon-cut:before{content:"f0c4";}
    .icon-copy:before{content:"f0c5";}
    .icon-paperclip:before,.icon-paper-clip:before{content:"f0c6";}
    .icon-save:before{content:"f0c7";}
    .icon-sign-blank:before{content:"f0c8";}
    .icon-reorder:before{content:"f0c9";}
    .icon-list-ul:before{content:"f0ca";}
    .icon-list-ol:before{content:"f0cb";}
    .icon-strikethrough:before{content:"f0cc";}
    .icon-underline:before{content:"f0cd";}
    .icon-table:before{content:"f0ce";}
    .icon-magic:before{content:"f0d0";}
    .icon-truck:before{content:"f0d1";}
    .icon-pinterest:before{content:"f0d2";}
    .icon-pinterest-sign:before{content:"f0d3";}
    .icon-google-plus-sign:before{content:"f0d4";}
    .icon-google-plus:before{content:"f0d5";}
    .icon-money:before{content:"f0d6";}
    .icon-caret-down:before{content:"f0d7";}
    .icon-caret-up:before{content:"f0d8";}
    .icon-caret-left:before{content:"f0d9";}
    .icon-caret-right:before{content:"f0da";}
    .icon-columns:before{content:"f0db";}
    .icon-sort:before{content:"f0dc";}
    .icon-sort-down:before{content:"f0dd";}
    .icon-sort-up:before{content:"f0de";}
    .icon-envelope:before{content:"f0e0";}
    .icon-linkedin:before{content:"f0e1";}
    .icon-rotate-left:before,.icon-undo:before{content:"f0e2";}
    .icon-legal:before{content:"f0e3";}
    .icon-dashboard:before{content:"f0e4";}
    .icon-comment-alt:before{content:"f0e5";}
    .icon-comments-alt:before{content:"f0e6";}
    .icon-bolt:before{content:"f0e7";}
    .icon-sitemap:before{content:"f0e8";}
    .icon-umbrella:before{content:"f0e9";}
    .icon-paste:before{content:"f0ea";}
    .icon-lightbulb:before{content:"f0eb";}
    .icon-exchange:before{content:"f0ec";}
    .icon-cloud-download:before{content:"f0ed";}
    .icon-cloud-upload:before{content:"f0ee";}
    .icon-user-md:before{content:"f0f0";}
    .icon-stethoscope:before{content:"f0f1";}
    .icon-suitcase:before{content:"f0f2";}
    .icon-bell-alt:before{content:"f0f3";}
    .icon-coffee:before{content:"f0f4";}
    .icon-food:before{content:"f0f5";}
    .icon-file-text-alt:before{content:"f0f6";}
    .icon-building:before{content:"f0f7";}
    .icon-hospital:before{content:"f0f8";}
    .icon-ambulance:before{content:"f0f9";}
    .icon-medkit:before{content:"f0fa";}
    .icon-fighter-jet:before{content:"f0fb";}
    .icon-beer:before{content:"f0fc";}
    .icon-h-sign:before{content:"f0fd";}
    .icon-plus-sign-alt:before{content:"f0fe";}
    .icon-double-angle-left:before{content:"f100";}
    .icon-double-angle-right:before{content:"f101";}
    .icon-double-angle-up:before{content:"f102";}
    .icon-double-angle-down:before{content:"f103";}
    .icon-angle-left:before{content:"f104";}
    .icon-angle-right:before{content:"f105";}
    .icon-angle-up:before{content:"f106";}
    .icon-angle-down:before{content:"f107";}
    .icon-desktop:before{content:"f108";}
    .icon-laptop:before{content:"f109";}
    .icon-tablet:before{content:"f10a";}
    .icon-mobile-phone:before{content:"f10b";}
    .icon-circle-blank:before{content:"f10c";}
    .icon-quote-left:before{content:"f10d";}
    .icon-quote-right:before{content:"f10e";}
    .icon-spinner:before{content:"f110";}
    .icon-circle:before{content:"f111";}
    .icon-mail-reply:before,.icon-reply:before{content:"f112";}
    .icon-github-alt:before{content:"f113";}
    .icon-folder-close-alt:before{content:"f114";}
    .icon-folder-open-alt:before{content:"f115";}
    .icon-expand-alt:before{content:"f116";}
    .icon-collapse-alt:before{content:"f117";}
    .icon-smile:before{content:"f118";}
    .icon-frown:before{content:"f119";}
    .icon-meh:before{content:"f11a";}
    .icon-gamepad:before{content:"f11b";}
    .icon-keyboard:before{content:"f11c";}
    .icon-flag-alt:before{content:"f11d";}
    .icon-flag-checkered:before{content:"f11e";}
    .icon-terminal:before{content:"f120";}
    .icon-code:before{content:"f121";}
    .icon-reply-all:before{content:"f122";}
    .icon-mail-reply-all:before{content:"f122";}
    .icon-star-half-full:before,.icon-star-half-empty:before{content:"f123";}
    .icon-location-arrow:before{content:"f124";}
    .icon-crop:before{content:"f125";}
    .icon-code-fork:before{content:"f126";}
    .icon-unlink:before{content:"f127";}
    .icon-question:before{content:"f128";}
    .icon-info:before{content:"f129";}
    .icon-exclamation:before{content:"f12a";}
    .icon-superscript:before{content:"f12b";}
    .icon-subscript:before{content:"f12c";}
    .icon-eraser:before{content:"f12d";}
    .icon-puzzle-piece:before{content:"f12e";}
    .icon-microphone:before{content:"f130";}
    .icon-microphone-off:before{content:"f131";}
    .icon-shield:before{content:"f132";}
    .icon-calendar-empty:before{content:"f133";}
    .icon-fire-extinguisher:before{content:"f134";}
    .icon-rocket:before{content:"f135";}
    .icon-maxcdn:before{content:"f136";}
    .icon-chevron-sign-left:before{content:"f137";}
    .icon-chevron-sign-right:before{content:"f138";}
    .icon-chevron-sign-up:before{content:"f139";}
    .icon-chevron-sign-down:before{content:"f13a";}
    .icon-html5:before{content:"f13b";}
    .icon-css3:before{content:"f13c";}
    .icon-anchor:before{content:"f13d";}
    .icon-unlock-alt:before{content:"f13e";}
    .icon-bullseye:before{content:"f140";}
    .icon-ellipsis-horizontal:before{content:"f141";}
    .icon-ellipsis-vertical:before{content:"f142";}
    .icon-rss-sign:before{content:"f143";}
    .icon-play-sign:before{content:"f144";}
    .icon-ticket:before{content:"f145";}
    .icon-minus-sign-alt:before{content:"f146";}
    .icon-check-minus:before{content:"f147";}
    .icon-level-up:before{content:"f148";}
    .icon-level-down:before{content:"f149";}
    .icon-check-sign:before{content:"f14a";}
    .icon-edit-sign:before{content:"f14b";}
    .icon-external-link-sign:before{content:"f14c";}
    .icon-share-sign:before{content:"f14d";}
    .icon-compass:before{content:"f14e";}
    .icon-collapse:before{content:"f150";}
    .icon-collapse-top:before{content:"f151";}
    .icon-expand:before{content:"f152";}
    .icon-euro:before,.icon-eur:before{content:"f153";}
    .icon-gbp:before{content:"f154";}
    .icon-dollar:before,.icon-usd:before{content:"f155";}
    .icon-rupee:before,.icon-inr:before{content:"f156";}
    .icon-yen:before,.icon-jpy:before{content:"f157";}
    .icon-renminbi:before,.icon-cny:before{content:"f158";}
    .icon-won:before,.icon-krw:before{content:"f159";}
    .icon-bitcoin:before,.icon-btc:before{content:"f15a";}
    .icon-file:before{content:"f15b";}
    .icon-file-text:before{content:"f15c";}
    .icon-sort-by-alphabet:before{content:"f15d";}
    .icon-sort-by-alphabet-alt:before{content:"f15e";}
    .icon-sort-by-attributes:before{content:"f160";}
    .icon-sort-by-attributes-alt:before{content:"f161";}
    .icon-sort-by-order:before{content:"f162";}
    .icon-sort-by-order-alt:before{content:"f163";}
    .icon-thumbs-up:before{content:"f164";}
    .icon-thumbs-down:before{content:"f165";}
    .icon-youtube-sign:before{content:"f166";}
    .icon-youtube:before{content:"f167";}
    .icon-xing:before{content:"f168";}
    .icon-xing-sign:before{content:"f169";}
.icon-youtube-play:before{content:"f16a";}
.icon-dropbox:before{content:"f16b";}
.icon-stackexchange:before{content:"f16c";}
.icon-instagram:before{content:"f16d";}
.icon-flickr:before{content:"f16e";}
.icon-adn:before{content:"f170";}
.icon-bitbucket:before{content:"f171";}
.icon-bitbucket-sign:before{content:"f172";}
.icon-tumblr:before{content:"f173";}
.icon-tumblr-sign:before{content:"f174";}
.icon-long-arrow-down:before{content:"f175";}
.icon-long-arrow-up:before{content:"f176";}
.icon-long-arrow-left:before{content:"f177";}
.icon-long-arrow-right:before{content:"f178";}

And the header.html :

<!DOCTYPE html>
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><html lang="en"><![endif]-->
<!--[if !IE]><html lang="en"><![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, nofollow">
    <meta name="description" content="Your website description here">
    <meta name="keywords" content="your, website, keywords, here">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="{$resourcesUrl}/images/favicon/favicon.ico">

    <title>Afric'Edu</title>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/modernizr.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/pace.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/classie.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/jquery.fittext.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/jquery.mixitup.min.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/jquery.sudoslider.min.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/jquery.superslides.min.js"></script>
    <script type="text/javascript" src="{$resourcesUrl}/js/lib/smoothscroll.js"></script>



    <link rel="stylesheet" href="{$resourcesUrl}/css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="{$resourcesUrl}/css/lib/magnific-popup.css">
    <link rel="stylesheet" href="{$resourcesUrl}/css/lib/lite.css">
    <link rel="stylesheet" href="{$resourcesUrl}/style.css">
    <link rel="stylesheet" href="{$resourcesUrl}/css/colors/yellow.css">
    <link rel="stylesheet" href="{$resourcesUrl}/genericons/genericons.css">



    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

<body {$bodyClasses}>

    <header>
        <!-- Menu -->
        <nav class="menu" id="theMenu">
            <div class="menu-wrap">
                <h1 class="logo"><a href="#home">Afric-Edu</a></h1>
                <i class="icon-remove menu-close"></i>
                <a href="/#home">Accueil</a>
                <a href="/#introduction">A propos</a>
                <a href="/#news">AcualitÃ©s</a>
                <a href="/#about-us">L'Ã©quipe</a>
                <a href="/#portfolio">Portfolio</a>
                <a href="#contact">Contact</a>
                <a target="_blank" href="https://www.facebook.com/AfricEdu?ref=ts&fref=ts"><i class="icon-facebook"></i></a>
                <a target="_blank" href="https://plus.google.com/104703521064760647927/posts"><i class="icon-google-plus"></i></a>
                <a target="_blank" href="https://twitter.com/AfricEduEcam"><i class="icon-twitter"></i></a>
                <a target="_blank" href="mailto:africedu@ecam.fr"><i class="icon-envelope"></i></a>
            </div>

            <!-- Menu button -->
            <div id="menuToggle">
                <i class="icon-reorder"></i>
                Menu
            </div>
        </nav>
    </header>

The console does not return me any 404 error, everything seems ok:

Afric’Edu

<link rel="stylesheet" href="http://local.afric-edu.com/wp-content/themes/visual-immersion-one-page-template/css/lib/font-awesome.min.css">
<link rel="stylesheet" href="http://local.afric-edu.com/wp-content/themes/visual-immersion-one-page-template/css/lib/magnific-popup.css">
<link rel="stylesheet" href="http://local.afric-edu.com/wp-content/themes/visual-immersion-one-page-template/css/lib/lite.css">
<link rel="stylesheet" href="http://local.afric-edu.com/wp-content/themes/visual-immersion-one-page-template/style.css">
<link rel="stylesheet" href="http://local.afric-edu.com/wp-content/themes/visual-immersion-one-page-template/css/colors/yellow.css">
<link rel="stylesheet" href="http://local.afric-edu.com/wp-content/themes/visual-immersion-one-page-template/genericons/genericons.css">

This is my .htacess:

<IfModule mod_rewrite.c>    

AddDefaultCharset UTF-8

DirectoryIndex index.php index.html
RewriteEngine On
RewriteBase /
AddType image/gif .gif
AddType image/ief .ief
AddType image/jpeg .jpeg .jpg .jpe
AddType image/png .png
AddType image/png .png
AddType application/x-font-ttf        .ttf
AddType application/octet-stream      .ttf
AddType font/truetype                 .ttf
AddType font/ttf                      .ttf
AddType application/vnd.ms-fontobject .eot
AddType application/font-woff          .woff
AddType application/x-font-woff       .woff
AddType application/x-woff            .woff
<FilesMatch ".(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

# webfont mime types
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType application/x-font-woff              woff

# webfonts and svg:
<IfModule mod_deflate.c>
  <FilesMatch ".(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

  RewriteRule ^index.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.php [L]
  Order allow,deny
  Allow from all

</IfModule>

AddType is necessary to avoid errors MIME type that I had previously.

I do not know why the icons are not displayed: Is the htaccess or something else (bad url)?

Thank for your help !

Post Views: 2

5 comments

Anonymous says:

March 28, 2023 at 9:29 am
Reading through the code, everything seems fine but i think i may have spotted a small typo which may be the error.

You have this in your header file
```
<a target="_blank" href="https://www.facebook.com/AfricEdu?ref=ts&fref=ts"></a>
<a target="_blank" href="https://plus.google.com/104703521064760647927/posts"></a>
<a target="_blank" href="https://twitter.com/AfricEduEcam"></a>
<a target="_blank" href="mailto:africedu@ecam.fr"></a>
```
Should the i class’s not be something like genericon-facebook etc?

Do you have the html output of the webpage, or at least the html output of where the genericons should be displaying?

EDIT

Looking at the new code, i dont think you’re calling in the source right.
```
wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont.eot?v=3.2.1
```
should be
```
../../font/fontawesome-webfont.eot?v=3.2.1
```
The css file looks for imports relative to its place in the file structure.
Log in to Reply
Anonymous says:

March 28, 2023 at 9:29 am

I found a little provisory tricky here:FontAwesome doesn’t display in Firefox

i added : <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

But i want to found the true solution 😀

Log in to Reply
Anonymous says:

March 28, 2023 at 9:29 am

I found with fontawesome you must include the base class “fa” along with the icon identifier otherwise the font file will not even load. You can verify that with firebug in the Net panel. I chased up all sorts of deadends until I read the docs fully. The link “FontAwesome doesn’t display in Firefox” attached to a previous answer in this thread mentions this fact in the last answer. Good luck!

Log in to Reply
Anonymous says:

March 28, 2023 at 9:29 am

Do you still have the problem?
I solved, i download it the font url, from the URL that you give us “netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css”
(.eot)(.ttf)(.woff) and i copied it in the “frameworkfontsfont-awesome” folder, at least in my case.
Then F5 and icons appears.

Saludos.-

Log in to Reply

I’ve added this code to my .htaccess and it worked for me:

## Fix Simple Social Icons for Firefox ##
<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

WordPress theme: The font awesome icons not displayed

Leave a Reply Cancel reply

5 comments

EDIT

Social Network

Related posts

Leave a Reply Cancel reply

5 comments

EDIT

Social Network