html - 无法显示 Font Awesome 图像

标签 html css font-awesome

在我的页脚上工作，我想添加社交媒体图标(twitter、facebook 和 instagram)。所以我发现字体很棒，我按照所有步骤操作，但图标没有显示。我不太确定我错过了什么，我只得到小方 block 而不是图标。有熟悉这方面的人可以提供帮助吗？

代码如下:

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

最佳答案

如果你想在你的网站上托管 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 ，第一步说:

  1. 将整个 font-awesome 目录复制到您的元素中。

尽管您只需要将 css 和 fonts 文件夹复制到元素的根目录(或更改 .css 中的路径)文件)

关于html - 无法显示 Font Awesome 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32418232/

上一篇：javascript - 无法使用 javascript 根据键和值对 textarea 中的条目进行排序？

下一篇：javascript - 响应式设计 : switching order of Div's

相关文章：

html - 如何在不覆盖现有 CSS 的情况下包含多个 CSS？

HTML 5 - 使用本地主机测试离线缓存

javascript - PHP 中的 Jquery div 填充只是重定向到 PHP 页面？

html - 消失水平滚动条

html - 3 列网格导航栏 Bootstrap

html - 折叠自动换行的 <h1> 标签的宽度

css - 在 Angular Material 的 md-option 上将空白设置为正常

html - 停止文本在 anchor 内的图标下换行

css - 如何在圆形背景中将图标居中

css - 组合框 extjs 6 中显示的超赞字体图标

©2024 IT工具网  联系我们