Wordpress 主题：字体真棒图标未显示

Posted 2023-05-09

技术标签:

【中文标题】Wordpress 主题：字体真棒图标未显示【英文标题】：Wordpress theme: The font awesome icons not displayed 【发布时间】：2014-05-02 07:26:10 【问题描述】：

我有一个 wordpress 主题，我想添加泛型。

我的问题是泛型没有显示在任何浏览器中：

这是我的主题文件树：

这是genericon.css代码：

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

还有 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>

控制台没有返回任何 404 错误，一切正常：

非洲教育

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

这是我的 .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 是避免我之前遇到的错误 MIME 类型所必需的。

不知道为什么图标不显示：是htaccess还是别的什么（坏的url）？

感谢您的帮助！

【问题讨论】：

【参考方案1】：

通读代码，一切似乎都很好，但我想我可能发现了一个可能是错误的小错字。

你的头文件中有这个

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

i 类不应该是 genericon-facebook 之类的吗？

您是否有网页的 html 输出，或者至少应该显示泛型的 html 输出？

编辑

查看新代码，我认为您没有在源代码中调用。

wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont.eot?v=3.2.1

应该是

../../font/fontawesome-webfont.eot?v=3.2.1

css 文件根据其在文件结构中的位置查找导入。

【讨论】：

我搞错了，我没有显示正确的文件。我只是用新的 css 替换了旧的。查看修改后的答案。我认为这是由于文件链接。检查您的网络以查看是否调用了字体，但根据我对 css 的了解，导入应该来自 css 文件放置而不是来自根其实我默认有../../font/fontawesome-webfont.eot？ v = 3.2.1。和 utl wp-content/themes/visual-immersion-one-page-template/font/fontawesome-webfont 。 eot？ v = 3.2.1 是验证初始问题不是来自那里的初始问题的测试。但是，用../../Font/fontawesome-webfont.eot？ V = 3.2.1 问题依然存在... 你有我可以看的演示吗？似乎是一个奇怪的问题，可能会有一个简单的修复，但我看不到任何拼写错误或任何它无法运行的原因。【参考方案2】：

我在这里发现了一个小技巧：FontAwesome doesn't display in Firefox

我补充说：<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

但我想找到真正的解决方案：D

【讨论】：

【参考方案3】：

我发现 fontawesome 必须包含基类“fa”以及图标标识符，否则字体文件甚至不会加载。您可以在 Net 面板中使用 firebug 进行验证。在我完全阅读文档之前，我一直在寻找各种死胡同。此线程中先前答案的链接“FontAwesome 不显示在 Firefox 中”在最后一个答案中提到了这一事实。祝你好运！

【讨论】：

【参考方案4】：

你还有问题吗？我解决了，我从你给我们的 URL “netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css”下载了字体 url (.eot)(.ttf)(.woff) 我将它复制到“\framework\fonts\font-awesome”文件夹中，至少在我的情况下。然后出现 F5 和图标。

Saludos.-

【讨论】：

【参考方案5】：

我已将此代码添加到我的 .htaccess 中，它对我有用：

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

【讨论】：

以上是关于Wordpress 主题：字体真棒图标未显示的主要内容，如果未能解决你的问题，请参考以下文章

字体真棒：一些图标未在移动设备上显示（iPhone iOS）

css 替换X主题中的社交媒体（字体真棒）图标

如何在自定义帖子类型UI菜单图标区域添加字体真棒图标？

字体真棒图标未在 Phonegap iOS 应用程序中呈现

字体真棒显示方形而不是图标

将字体真棒图标添加到完整的日历标题