字体Awesome显示框而不是图标 [英] Font Awesome Showing Box instead of Icons

问题描述

我已使用以下链接代码将所有字体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>

在官方文件中：

启动并运行后，您可以在任何位置使用< i> 标签将Font Awesome图标置于
。

它还说：

您可以放置​​Font Awesome图标几乎任何地方使用CSS
前缀 fa 和图标的名称。 Font Awesome设计为使用
与内联元素（我们喜欢< i> 标签为简洁，但使用
< span> 在语义上更正确）。

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

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag.

It also says:

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

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显示框而不是图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！