无法显示字体真棒图像答案

【问题标题】：Cannot get Font Awesome Images to Show无法显示字体真棒图像
【发布时间】：2015-12-01 19:16:31
【问题描述】：

在我的页脚上工作，我想添加社交媒体图标（twitter、facebook 和 instagram）。所以我发现字体很棒，我按照所有步骤操作，但图标没有出现。我不太确定我错过了什么，我只得到小方块而不是图标。有哪位熟悉这个可以帮忙吗？

代码如下：

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

【问题讨论】：

浏览器控制台出现什么错误？您如何包括 FA？
我得到社交媒体徽标的唯一错误没有显示，但它们周围的圆圈在那里。对不起，但我不太明白你的问题是如何包含 FA 的。是否有一些我没有包含的代码？
根据您发布的代码，您根本没有包含 FA。您如何包含相关文件？你知道如何检查浏览器控制台的错误吗？见webmasters.stackexchange.com/questions/8525/…
aaa 那告诉你什么？请发布一个完整的代码示例，以便我们还可以看到您如何包含 FA 文件。
如果在使用css/font-awesome.min.css时仍然出现找不到文件的错误，请确保该文件存在。最好使用href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css，确保包含http://。在本地测试并忽略它时，大多数浏览器使用 file:// 代替，这会失败。

标签： html css font-awesome

【解决方案1】：

如果您想在您的网站中托管 Font Awesome，您还需要包含字体...打开 font-awesome.css 文件，您会看到字体应该放置在：

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

在您的情况下，您应该将 CSS 放在 css 文件夹中：

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

您可以随时更改字体的路径，但您将编辑css 文件，并记住一旦您“更新”文件...

为什么不像你注释掉的那样直接使用网络版本？

这是一个使用 maxcdn 版本的 JSBin 示例：

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

这一切都很好解释in the website，第一步说：

将整个 font-awesome 目录复制到您的项目中。

虽然您只需将css 和fonts 文件夹复制到项目的根目录（或更改.css 文件中的路径）

【讨论】：