AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Font-Awesome4.7.0版本字体图标显示问题

2022-12-15 1199
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况，本文提供一个解决思路

在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况，本文提供一个解决思路

解决方法

经过一系列踩坑，终于找到了一个解决方法，那就是引入CSS过程中直接引入官方的CDN，代码如下，将其输入到<head></head>头部即可

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css


具体的字体图标使用方法请参考我的这篇文章，讲的很详细了

Font-Awesome如何引入矢量字体图标

文章标签：
前端开发
CDN
ThundersArk
目录
相关文章
编程达人
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
编程达人
338 0
css:网页引入字体@font-face以及动态加载字体
白如意i
|
6天前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
白如意i
6 0
前端迷
|
前端开发 程序员
css制作的tip提示框
css制作的tip提示框
前端迷
265 0
祁符建
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进，前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中，字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
祁符建
379 1
ThundersArk
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中，我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页，但是传统的图片引用方式引入的的是图像图标，不易修改，而矢量字体图标则能很好地解决这一问题，因为矢量字体图标的本质是字体，可以使用“<style>”标签对其属性进行修改，非常方便，已经被广泛应用于网页开发中！本文主要介绍font-awesome-4.7.0的引入和使用
ThundersArk
356 0
Font-Awesome如何引入矢量字体图标
穆雄雄
|
前端开发
CSS3中引入多种自定义字体（font-face）
CSS3中引入多种自定义字体（font-face）
穆雄雄
428 0
CSS3中引入多种自定义字体（font-face）
张起灵-小哥
|
前端开发
web前端学习（十五）——CSS3字体属性（font）的相关设置
web前端学习（十五）——CSS3字体属性（font）的相关设置
张起灵-小哥
195 0
web前端学习（十五）——CSS3字体属性（font）的相关设置
一乐乐
|
前端开发
font-awesome不显示以及字体样式的引入方式：
font-awesome不显示以及字体样式的引入方式：
一乐乐
678 0
font-awesome不显示以及字体样式的引入方式：
玄学酱
|
前端开发
把 SVG 图标对齐到文本，以告别字体图标（Font Icons）的时代
本文讲的是把 SVG 图标对齐到文本，以告别字体图标（Font Icons）的时代，在字体图标盛行的时代，推行 SVG 图标可谓是 Web 社区中的一次重要契机。毕竟，使用 SVG 图标系统能更好地遵循图形的访问性标准，并渲染出更高质量的图像。
玄学酱
4089 0
luckyharry4
|
前端开发
Bootstrap4 图标无法使用，使用font-awesome代替
前言 最近正在练手一个Angular4的项目，需要用到矢量图标相关的功能，但是发现Bootstrap4 图标功能失效，进过调查发现是图标功能被移除bootstrap包下，所以在这里记录一下。 正文 首先将font-awesome进行安装： npm install --save font-awesome 然后在angular.json中进行配置，找到styles，将下方位置进行添加： "./node_modules/font-awesome/css/font-awesome.css" 这样在项目中正常使用就行。
luckyharry4
2095 0