Font Awesome图标显示问题

最新推荐文章于 2023-08-15 22:17:05 发布
最新推荐文章于 2023-08-15 22:17:05 发布
阅读量442 收藏
点赞数 3
分类专栏： fontawesome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52267757/article/details/113053397
版权
本文介绍了在使用FontAwesome图标时遇到的显示问题，包括图标不显示和仅显示白框的两种情况。解决方案包括确保CSS文件和字体文件位于同一目录，并正确引用font-awesome.min.css。对于显示白框的问题，可能的原因是CSS与字体文件路径不正确或版本不匹配。建议使用4.7.0版本，其图标前缀为'fa'。同时提醒注意不同版本的图标前缀可能有所变化。
摘要由CSDN通过智能技术生成

Font Awesome图标显示问题

1. 白板
插入后什么也没有

插入后什么也没有

那就先下载Fontawesome4.7

下载好后直接把整个文件解压到，你需要用的文件夹里就可以了。
在这里插入图片描述
如果不想把整个文件放进去就把红框标记的放在同一目录在这里插入图片描述

在HTML的 中引用font-awesome.min.css

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

问题就解决了。在这里插入图片描述

2. 只显示一个白框

  • 只显示白框有可能是上面说到的，CSS和font没有在同一目录下。
  • 还有就是版本问题
    4.7.0的开头是fa
    在这里插入图片描述
    新版的不确定
    fontawesome新版
    在这里插入图片描述
    以上都是我出现过的问题，欢迎大佬补充指正
dekua_
关注
专栏目录
为什么我的Font Awesome图标显示为空白方块？
10-10 1284
So you've decide to use Font Awesome for some great scalable icons. You download them, maybe you use the Bootstrap CDN. 因此，您已决定将Font Awesome用于一些出色的可扩展图标。 您可以下载它们，也可以使用Bootstrap CDN。 You're not an idi...
font awesome 字体冲突 图标无法显示
choulixiu1105的博客
08-01 397
点击打开链接 转载于:https://my.oschina.net/weiqinxue/blog/725210
font-awesome不出效果
洛豳枭薰
04-30 2297
1、检查字体路径是否加载对了 2、font-awesome样式文件是否加载对了 3、是HTML中用（千万别加载CSS的硬编码），是CSS中用（千万别加载HTML的硬编码） 4、是否跨域问题存在 注：我的是路径错误了
fontawesome引入的时候，在页面上显示不成功，显示方块
m0_51047424的博客
03-21 1885
fontawesome引入的时候，在页面上显示不成功，显示方块
html引入font-awesome的css文件后， 图标只显示方框
qq_41897021的博客
12-15 6940
首次使用font-awesome，并且没人教，就安装官网的新手入学来操作！！ 没想到还没开始操作就出现了问题！！实在是难受啊！！通过的网上搜索，一直看不懂意思！傻傻一脸懵逼的样子o(╥﹏╥)o ！ 经过一个小时的努力理解终于找到了问题的所在！(#^.^#) 问题所在： 首先从官网上看到的是这样的！！我这样的方式引入！！ 然后随便找个图标复制源码： <i class="fa fa-bath fa-4x" aria-hidden="true"></i>嘿嘿 运行：
C# Winform使用Font Awesome图标
最新发布
03-05
本文将详细讲解如何在C# Winform项目中使用Font Awesome图标，以及提供的三个字体文件的作用。 首先，Font Awesome图标库分为几种不同的样式，包括Solid、Regular和Brands。在您提供的压缩包中，有以下三个字体文件...
fontawesome图标选择插件
03-27
"fortawesome图标选择插件"是一款基于前端开发技术的实用工具，专为网页设计者和开发者设计，便于在项目中快速、方便地选择和使用Font Awesome图标库中的图标。这款插件充分利用了Font Awesome的丰富资源，包含2011...
BootStrap中的Fontawesome 图标
08-30
BootStrap中的Fontawesome图标 Bootstrap中的Fontawesome图标是指在Bootstrap框架中使用Fontawesome图标库来美化页面的控件和界面。Fontawesome是一种基于CSS的图标库，提供了数千个图标，能够满足大多数的开发需求...
font awesome 3.2.1 图标资源及离线文档
10-18
Font Awesome 是一个广泛使用的图标库，它将矢量图形与Web字体技术相结合，使得开发者可以在网页设计中方便地使用各种图标。在3.2.1版本中，它提供了丰富的图标集合，涵盖了社交网络、导航、文件类型等多种类别，极...
css3 fontawesome图标字体使用鼠标悬停动画图标字体
11-24
Font Awesome图标库包含了数百个矢量图形，这些图形被编码为字体文件（.ttf或.woff），然后可以像文字一样在HTML中引用。例如，要显示一个“home”图标，只需在HTML中插入一个`<i>`标签，并添加相应的类名 `.fa fa-...
FontAwesome图标显示为方框
qq_42411921的博客
03-15 3011
在做Web项目时，遇到小图标显示为方框的问题 通过定位小图标(上图中已经修改好，刚开始时是方框)，发现对应html中的某个css文件 查的该css文件为fontawesome的文件 找到项目的html文件中，css文件引用 文件正常引用 打开该css文件，我的css文件为all.min.css 检查css文件发现 我的css文件有url引用，但对应的目录下却没有对应的字体和图标文件 从模板网站重新下载对应文件 并放入对应的文件路径中 重新启动项目，可以正常显示小图标 ...
Font Awesome 图标的使用
qq_43688952的博客
03-16 460
Font Awesome图标的使用教程
Font-Awesome如何引入矢量字体图标
Thunder Wang的博客
09-15 1129
Font-Awesome如何引入矢量字体图标
font-awesome不显示以及字体样式的引入方式：
伟庭师兄的博客
08-15 534
2,使用时，不能只把css文件复制到自己的工程项目下，还需要把fonts文件夹一起复制过去【问题解决】然后，再复制图标名称，注意引入阿里图标名称到元素的class=“ ” 【加前缀 iconfont】选择自己需要的图标-》点“购物车”按钮去-》添加到项目（没有项目则随便起个项目名创建一个）（1）官网下载样式copy到自己的工程项目下link引入。-》复制生成的代码到<link href=" ">中，font-awesome不显示。，点击下载一下，就可以使用啦.“复制代码”即可获得图标名称，
Font Awesome图标在IE浏览器不显示的解决方法
weixin_46536331的博客
04-19 1858
Font Awesome图标在IE浏览器不显示的解决方法 1、查看css路径是否正确 2、查看font文件夹内的字体文件是否引入 3、查看font文件夹内的字体资源路径是否正确 自测的解决办法有： 第一种办法也是自测解决的办法，就是直接引入线上的链接 <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> 这是我在菜鸟教程复制的，链入后果真就出现图标了
ChatGPT帮忙写一篇Font Awesome的文章，效率有多高？（附加Font Awesome 图标无法正确显示解决方法）
qq_55154022的博客
12-11 820
让大火的ChatGPT帮忙写一篇Font Awesome的文章，它的效率有多高？通过ChatGPT来引导快速生成一篇文章，但ChatGPT也只是通过网络上已经存在的文章或者代码给出的，所以也会存在一些不准确的地方。所以后面附加Font Awesome 图标无法正确显示问题以及解决方法。
FontAwesome 4.7.0 中完整的675个图标样式CSS参考
weixin_30312563的博客
03-26 2339
FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法：首先引入CSS文件：<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">然后用 <i class="fa fa-XXXX"><...
font-awesome图标显示问题
热门推荐
dwLi的博客
12-17 1万+
font-awesome一个很强大的字体图标库。 下载链接：font-awesome 刚开始使用font-awesome的新手往往容易只引入一个css文件，这样就会导致图标显示不出来。如下图 下载解压后我们至少需要引入这两个文件夹css、fonts,）这两个文件夹必须同级（其他两个文件夹暂时没用到过），不然就会出现图标显示不出来，建议解压出来的整个文件丢到项目里（不大） 页面引用 &lt;li...
fontawesome图标库
07-28
Font Awesome 是一个非常流行的图标库，它提供了一套丰富多样...你可以通过 Font Awesome 的官方网站（https://fontawesome.com/）浏览并搜索各种不同的图标，还可以了解更多关于如何使用和定制 Font Awesome 的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值