简体   繁体   English

显示为黑匣子的FontAwesome图标。 显示图标需要什么CSS?

[英]FontAwesome icon showing as black box. What CSS is needed to display icon?

Pretty sure I am being dim but how do I get the icon to display? 可以肯定我很昏暗,但是如何显示图标? Is certain CSS needed and if so what would that be? 是否需要某些CSS,如果需要的话,那会是什么?

<html>
<head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <i class="fa fa-angle-double-down"></i>
</body>
</html>

Seems to work okay. 看起来工作还可以。

I suspect that you need to add the http:// into your URL in href . 我怀疑您需要将http://添加到href的URL中。

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <i class="fa fa-angle-double-down"></i> 

What is the cause of the problem? 是什么原因引起的?

Links to external resources with no scheme ( http: ) break when the page is loaded via the file system ( file://path/to/webpage ). 通过文件系统( file://path/to/webpage )加载页面时,没有方案( http:外部资源链接会中断。 The current scheme is maintained, and the page will be unable to find them: 当前方案已维护,该页面将无法找到它们:

This can't be found:
file://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

To ensure that you can find external resources when loading a webpage from your file system, you should always include the scheme. 为了确保从文件系统加载网页时可以找到外部资源,应始终包括该方案。 CDN's will often omit the scheme, to reuse the current scheme to serve http resources on http sites and secure https resources on https sites. CDN的往往会忽略该计划,到重用当前的计划,以满足http资源http站点和安全的https资源https站点。


Have you included the font files? 您是否包含字体文件? Check your console for any 404s/errors. 检查您的控制台是否有404错误/错误。

I just tried with the 'angle-double-down' class and it works. 我刚刚尝试了“双下角”课程,它可以工作。

This happens when you have another font overriding your icon font. 当您有另一种字体覆盖您的图标字体时,会发生这种情况。 Search your CSS to see if there is another font-family:OtherFont!important; 搜索CSS以查看是否还有另一个font-family:OtherFont!important; .

  • Make sure that your Font-awesome CSS is loaded, and font-urls point to the correct fonts. 确保已加载超棒的CSS,并且font-urls指向正确的字体。

  • Check that you have the correct classes ie <i class="fa fa-angle-double-down"></i> 检查您是否具有正确的类,即<i class="fa fa-angle-double-down"></i>

  • Then explicitly specify your i.fa tags (which are used by Font-awesome to create the font) to 然后显式指定您的i.fa标记(Font-awesome用来创建字体)

    i.fa{ font-family:FontAwesome!important; }

Worked great for me. 对我来说很棒。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM