Question

在我的页脚上工作，我想添加社交媒体图标（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;
}

Answer 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文件中的路径）

无法获取Font Awesome Images以显示

1 个答案: