我无法显示我的字体超赞图标.尝试使用多种方法导入CSS [英] I can't get my font-awesome icons to show up. Tried importing css with multiple methods

问题描述

我正在使用HTML模板构建网站组合.我对CSS没有太多的经验，但是在django项目中将超棒的CSS文件作为链接和文件导入后，图标显示为小方框.我知道css文件可被识别，因为当我将其注释掉时，该框消失了.我认为css可能还有一些我不了解的更深层次的事情.

我怀疑如果有人可以帮助我，css主文件中会发生某些事情.谢谢！

这是模板中的代码:

 < ul class ="special">< li>< i class ="fab fa-pencil" title ="Edit"></i></li>< li>< a href =#" class ="icon fa-search">< span class ="label">放大镜</span></a></li>< li>< a href =#" class ="icon fa-tablet">< span class ="label"> Tablet</span></a</li>< li>< a href =#" class ="icon fa-flask">< span class ="label"< Flask</span></a></li>< li>< a href =#" class ="icon fa-cog">< span class ="label"> Cog?</span></a></li></ul> 

这是我导入的内容:

 < link rel ="stylesheet" type ='text/css'href ="{％static" css/main.css％}"/><！-< link rel ="stylesheet" href ="{％static" css/all.css％}">->< link rel ="stylesheet" href ="https://use.fontawesome.com/releases/v5.6.3/css/all.css"完整性="sha384-UHRtZLI + pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s&"</head> 

解决方案

您需要使用 fas 类，并且铅笔不会显示，因为它属于PRO软件包 ¹ (

2 正如您在下面看到的那样，只有固定版本不是PRO，因此Free软件包中仅包含一个版本，与其他2个版本不同.

相关问题:

伪元素上的字体真棒5显示正方形而不是图标

字体很棒5在伪元素中选择正确的字体系列

I'm building a website portfolio using a HTML template. I don't have too much experience with css, but after importing the font-awesome css file both as a link and file in my django project, the icons are showing up as little boxes. I know the css file is being recognized because when I comment it out the boxes go away. I think there may be something deeper going on with the css that I don't understand.

I suspect there's something going on in the main css file if someone could help me out. Thanks!

Here's the code from the template:

<ul class="special">
    <li><i class="fab fa-pencil" title="Edit"></i></li>
    <li><a href="#" class="icon fa-search"><span class="label">Magnifier</span></a></li>
    <li><a href="#" class="icon fa-tablet"><span class="label">Tablet</span></a></li>
    <li><a href="#" class="icon fa-flask"><span class="label">Flask</span></a></li>
    <li><a href="#" class="icon fa-cog"><span class="label">Cog?</span></a></li>
</ul>

Here's what I've imported:

 <link rel="stylesheet" type='text/css' href="{% static "css/main.css" %}" />
 <!-- <link rel="stylesheet" href="{% static "css/all.css" %}" > -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

解决方案

You need to use the fas class and the pencil one will not show because it belong to the PRO package¹ (https://fontawesome.com/icons/pencil?style=solid)

ul a {
  text-decoration:none;
  font-size:25px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
  <li><i class="fas fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="fas fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="fas fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="fas fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="fas fa-cog"><span class="label">Cog?</span></a></li>
</ul>

You cannot use the regular version of these icons far because all of them belong to the PRO package² so they won't show

ul a {
  text-decoration:none;
  font-size:25px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
  <li><i class="far fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="far fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="far fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="far fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="far fa-cog"><span class="label">Cog?</span></a></li>
</ul>

https://fontawesome.com/icons/tablet?style=regular

https://fontawesome.com/icons/search?style=regular

https://fontawesome.com/icons/flask?style=regular

https://fontawesome.com/icons/cog?style=regular

---

1 As you can see below, all the versions of this icon are PRO so there is no way to use this icon with the Free package:

2 As you can see below, only the solid version isn't PRO so only this one is included in the Free package unlike the 2 others.

Related questions:

Font Awesome 5 on pseudo elements shows square instead of icon

Font Awesome 5 Choosing the correct font-family in pseudo-elements

这篇关于我无法显示我的字体超赞图标.尝试使用多种方法导入CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！