字体真棒字体

Posted

技术标签:

【中文标题】字体真棒字体【英文标题】:Font Awesome fonts 【发布时间】:2020-09-24 19:19:43 【问题描述】:

我最近使用 npm 从站点安装了 font-awesome。当我在我的 html 文件中使用它时,它最终会在页面上显示正方形而不是图标。有人可以帮我解决这个问题吗?

我使用 fontawesome 图标的代码:

<li class="nav-item active"><a class="nav-link" href="index.html"><span class="fas fa-home"></span> Home</a></li>

我也包含了 CSS。

【问题讨论】:

你的意思是同时发布一些 CSS 吗? 不,我的意思是我在 HTML 中也包含了 CSS 链接。 向我们展示您如何链接到 html 中的 css。请阅读How to create a Minimal, Reproducible Example 【参考方案1】:

黑色方块通常表示字体类型有问题。但我不能肯定地说。试试 san serif,否则你可以在这篇文章中查看答案: Font awesome is not showing icon

最佳答案: 就我而言,我在我的 css 代码中犯了以下错误。

*
    font-family: 'Open Sans', sans-serif !important;

这将覆盖整个页面的所有字体系列规则。我的解决方案是像这样将代码移动到正文中。

body
    font-family: 'Open Sans', sans-serif;

注意:每当您在 css 中使用 !important 标志时,在同一元素上声明为相同类型的任何其他 css 规则都将被覆盖。 回答者:丹尼尔·巴德

--

这还取决于您导入库的方式,是通过 CDN 还是通过文件夹?

通过 CDN:检查路径/网址是否正确(可能是未经授权的链接?)。 通过文件夹/下载: 也许使用“/fonts/fontawesome-free-5.3.1-web/css/all.css” 代替 “/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css”。

【讨论】:

我没有在任何 CSS 中使用任何自定义字体系列样式。 我已经编辑了我的回复。如果它不是图书馆,我希望有更多经验的人会看看这个问题。祝项目顺利。

以上是关于字体真棒字体的主要内容,如果未能解决你的问题,请参考以下文章

字体真棒字体未加载?

字体真棒图像和字体很大

CSS - 样式字体真棒字体图标

字体真棒错误:可下载字体:被消毒剂拒绝

setState 不更新字体真棒图标

使用 jquery 添加类后,字体真棒图标字体作为输入中的占位符