字体Awesome显示框而不是图标

问题描述

我已使用以下链接代码将所有字体awesome css导入我的网站：

 最新编译和缩小的CSS  - > 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/> 
< link href =content / css / font-awesome / css / font-awesome.css =stylesheet/> 
< link href =content / css / theme.min.css =stylesheet/> 
< link href =content / css / WDWStyles.css =stylesheet/> 
  

然后添加图标：

 < p>找到我：< / p> 
< a class =btn btn-primary>< span class =fa fa-twitter>< / span> Twitter< / a> 
< a class =btn btn-primary>< span class =fa fa-github>< / span> Github< / a> 
< a class =btn btn-primary>< span class =fa fa-linkedin>< / span&已在< / a>中链接
  

我的自定义CSS是：

  @ font-face {
 font-family：'headline_onehplhs'; 
 src：url（'fonts / HEADOH __- webfont.eot'）; 
 src：url（'fonts / HEADOH __- webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'fonts / HEADOH __- webfont.woff2'）format '），
 url（'fonts / HEADOH __- webfont.woff'）format（'woff'），
 url（'fonts / HEADOH __- webfont.ttf'）format（'truetype'），
 url（'fonts / HEADOH __- webfont.svg＃headline_onehplhs'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
} 
 
 body {
 background-image：url（'../ images / background.jpg'）; 
 background-position：top center; 
 background-repeat：no-repeat; 
 background-attachment：fixed; 
 background-size：cover; 
} 
 
 .heading {
 background-color：#FFF; 
 font-family：'headline_onehplhs'; 
 font-size：3.5em; 
 margin-left：50px; 
 margin-top：50px; 
 padding：20px; 
 color：＃000; 
} 
 
。正交span，.main span {
 background-color：#FFF; 
 font-family：'headline_onehplhs'; 
 color：＃999; 
 font-size：0.5em; 
 display：block; 
} 
 
 .main span {
 font-size：1.75em; 
} 
 
 .main {
 background-color：#FFF; 
 margin-left：50px; 
 margin-top：25px; 
 padding：20px; 
 text-align：justify; 
} 
  

我的目录布局如下：

css> font-awesome> [font awesome folders]

我使用的容器类名为main

解决方案

但是图标仍显示为方框 - div>

尝试使用< i class =fa fa-twitter> 而不是< span class = -twitter>

在官方文件中：

它还说：

$ c>< span> 也是可以接受的，但在某些情况下无法正常工作，因此留在< i> 更安全的计划。

I've imported all the font awesome css into my website using the following link code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
 <link href="content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="content/css/theme.min.css" rel="stylesheet" />
<link href="content/css/WDWStyles.css" rel="stylesheet" />

And then added the icons using:

<p>Find me at:</p>
<a class="btn btn-primary"><span class="fa fa-twitter"></span> Twitter</a>
<a class="btn btn-primary"><span class="fa fa-github"></span> Github</a>
<a class="btn btn-primary"><span class="fa fa-linkedin"></span> Linked in</a>

My custom CSS is:

@font-face {
    font-family: 'headline_onehplhs';
    src: url('fonts/HEADOH__-webfont.eot');
    src: url('fonts/HEADOH__-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/HEADOH__-webfont.woff2') format('woff2'),
         url('fonts/HEADOH__-webfont.woff') format('woff'),
         url('fonts/HEADOH__-webfont.ttf') format('truetype'),
         url('fonts/HEADOH__-webfont.svg#headline_onehplhs') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  background-image: url('../images/background.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.heading {
    background-color:#FFF;
    font-family: 'headline_onehplhs';
    font-size:3.5em;
    margin-left:50px;
    margin-top:50px;
    padding:20px;
    color:#000;
}

.heading span, .main span {
    background-color:#FFF;
    font-family: 'headline_onehplhs';
    color:#999;
    font-size:0.5em;
    display:block;
}

.main span {
    font-size:1.75em;
}

.main {
    background-color:#FFF;
    margin-left:50px;
    margin-top:25px;
    padding:20px;
    text-align:justify;
}

My directory is laid out as follows:

css > font-awesome > [font awesome folders]

And the container that I'm using has the class name "main"

But the icons still display as square boxes - is there something I'm missing?

解决方案

Try to use <i class="fa fa-twitter"> rather than <span class="fa fa-twitter">

On the official doc:

It also says:

Although it sounds like using <span> is also acceptable, but it does not work correctly in some cases, so stay with <i> is a safer plan.

这篇关于字体Awesome显示框而不是图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！