开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

FontAwesome图标没有在CSS中显示:在Chrome的选择器之后？

FontAwesome是一款广泛使用的图标字体库，可以通过CSS样式来使用它提供的各种图标。如果在Chrome浏览器中，FontAwesome图标没有在CSS中正确显示，可能是由于以下几个原因：

未正确引入FontAwesome库：首先，需要确保在HTML文件中正确引入了FontAwesome的CSS文件。可以在<head>标签中添加以下代码来引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

这个链接是指向FontAwesome官方提供的CDN地址，确保在网络良好的情况下可以正常加载。

CSS选择器有误：在Chrome中显示FontAwesome图标的一个常见问题是，CSS选择器可能有误。确保使用了正确的选择器来应用FontAwesome的样式。例如，要在元素中显示一个图标，可以使用以下代码：

<i class="fas fa-icon-name"></i>

其中，fa-icon-name是FontAwesome图标对应的类名。可以在FontAwesome的官方网站上找到所需图标的类名。

字体文件未加载成功：FontAwesome是基于字体的图标库，需要正确加载字体文件才能显示图标。确保字体文件正确加载，并且可以从网络上访问到。可以在Chrome的开发者工具中检查是否有字体加载失败的报错信息。

总结：如果在Chrome中无法正确显示FontAwesome图标，可以按照上述步骤进行排查。首先确保已正确引入FontAwesome的CSS文件，然后检查CSS选择器是否正确，最后确保字体文件加载成功。如果问题仍然存在，可以尝试清除浏览器缓存或使用其他浏览器进行测试。

关于腾讯云相关产品，由于问题要求不涉及具体的品牌商，无法提供与腾讯云相关的产品信息和链接。

相关搜索:Bootstrap/Datatables CSS在chrome中显示，但不在firefox中显示 Chrome在我的页脚没有响应flexbox css吗？FontAwesome图标库在基于React的设计系统中的应用 FontAwesome在百里香中没有显示吗？Fontawesome无法在css中通过引用编号加载图标 Font在我的代码中没有显示很棒的图标 Google chrome没有显示fontawesome的图标 heroku没有在chrome中显示更新，但在safari中。SVG在Firefox中的显示与在Chrome中不同在FontAwesome React中显示复选图标时出现问题

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

WordPress为导航菜单添加个性图标字体

目前图标字体非常流行，图标字体使用简单，与图片格式的小图标相比，支持视网膜显示，可以无限放大。特别是一些响应式设计的主题模板，都会或多或少使用图标字体。我们还可以单独为导航菜单上的项目也配上个性化的图标字体。

01

在网站或桌面应用使用Font Awesome图标库

Font Awesome介绍 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。一个字库，675个图标仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。无需依赖JavaScript Font Awesome完全不依赖JavaScript，因此无需担心兼容性。无限缩放无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。如言语一般自由 Font Awesome完全免费，哪

02

Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（图标选择器篇）

最近，在项目的开发中，我们规划了一个 Icon 组件，我们希望通过这个组件，能直接同时使用多种图标库的图标（一种语法,实现无限的图标扩展和高度兼容性）并且，实现该 Icon 之后，理应还有一个图标选择器，可以加载出不同图标库的所有可用图标，方便直接选择使用，完整代码在文末提供。

02

第八十四节，css布局小技巧及font-awesome图标使用

font-awesome图标是一个css的插件包，是一个以字体文件方式集成的图标，首先要下载插件包

02

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后，大伙都不约而同的给菜单用上了图标字体，确实给博客带来了一定的美化效果。与之配套的是 font awesome 4 menus 这个图标字体插件，其实还是挺小巧的。不过，

05

Bootstrap 响应式框架第三集

<meta http-equiv="x-ua-compatible" content="IE=edge">

03

博客园主题修改中用到的css属性

样式覆盖 id选择器大于class选择器。对于原主题中想要覆盖的id选择器，使用!import覆盖。对于原主题中想要取消的css属性，使用inherit. 响应式当屏幕宽度不同时，隐藏部分元素。 @media (max-width:1360px) { #div_digg { bottom: 70px; left: 0; margin-left: 0; } } @media screen and (max-width:600px) {

07

使用 Fontawesome 的 React 组件

Fontawesome 是一套图表字体库框架，我们经常在项目中用到它的各式各样的图标，本文介绍的是如何使用其 React 组件形式的包应用到项目中。

03

前端开发总结：如何优化网站性能？

学前端这么久了，从一无所知到web网页的开发，自己也是踩了巨多的坑，自己也在不断的摸索中，短时间内可能不会再做前端了，毕竟java是我的主方向。总结一下web网站在性能提升方面前端能做些什么优化，其中有结合一些资料，也有自己的经验之谈，毕竟不是专门学前端的，有不对的地方敬请多多指教。

02

使用 Fontawesome 的 React 组件

Fontawesome 是一套图表字体库框架，我们经常在项目中用到它的各式各样的图标，本文介绍的是如何使用其 React 组件形式的包应用到项目中。

03

FontAwesome基础知识

注意：fa前缀最新版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。

01

这30个CSS选择器，你必须熟记（中）

大家好，上一篇文章里，《这30个CSS选择器，你必须熟记（上）》，我们一起学习了常用的10个CSS选择器，这篇文章我们将继续学习CSS选择器，由于文章篇幅有限，再介绍10个常用的CSS选择器。

01

学习WPF——使用Font-Awesome图标字体

图标字体介绍在介绍图标字体之前，不得不介绍图标格式ICON ICON是一种图标格式，我们操作系统中各种应用程序都包含一个图标比如QQ程序的图标是一个可爱的企鹅，我的电脑是一个显示器图标 ---------------- 一个图标文件是扩展名为.ICO或者ICON的文件直到现在图标文件还是在计算机程序中随处可见但有时候需要在不失真的情况下放大图标因为ICON本身与JPEG\PNG格式的图形文件差异不大，也是非矢量图形所以图标文件就很难满足这种需求 ---------------

05

这30个CSS选择器，你必须熟记（中）

大家好，上一篇文章里，《这30个CSS选择器，你必须熟记（上）》，我们一起学习了常用的10个CSS选择器，这篇文章我们将继续学习CSS选择器，由于文章篇幅有限，再介绍10个常用常用的CSS选择器。

00

从 Web 图标演进历史看最佳实践

导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。

01

如何应用Font Awesome矢量字体图标

本文介绍了如何使用Font Awesome图标字体库在网页中添加社交网络图标、Web应用程序图标和编辑器图标等，同时介绍了如何结合Bootstrap框架提高用户体验。

06

handsome自定义扩充iconfont图标及配色教程

本文只针对handsome主题，也是综合了在hexo和部分typecho主题中引入矢量图标的经验及网络上已有教程进行经验总结分享交流，有出入的地方还望大家指出，共同交流进步。

04

vue element-ui 图标选择组件vue-fontawesome-elementui-icon-picker

简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！

01

hexo 插件及 next 内置样式集

First add configuration in _config.yml from your hexo project.

01

【CSS】253- 从原型图到成品：步步深入 CSS 布局

你肯定经历过耗费数个小时，换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码，寄希望于误打误撞地赌中那个能实现预期效果的魔幻组合。

05

Hexo系列(2.1) - NexT主题美化与博客功能增强 · 第二章

网上有不少相关的帖子，不过版本会比较旧，而不同版本可能存在代码不同的问题，不过大部分还是大同小异，本系列就不啰嗦重复了，基本只会按照本人所使用的版本以及个人所使用到的内容来进行介绍。

01

Axure RP8入门之基本操作篇

格式说明：“Password”表示主要用途；“Input”表示元件类型，一般情况下可省略，当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读。

03

前端开发必备之Chrome开发者工具（上篇）

本文介绍的 Chrome 开发者工具基于 Chrome 65版本，如果你的 Chrome 开发者工具没有下文提到的那些内容，请检查下 Chrome 的版本简介 Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析打开 Chrome 开发者工具的方式有：在Chrome菜单中选择更多工具 > 开发者工具在页面元素上右键点击，选择 “检查” 使用快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac

Chrome DevTools 一些隐藏技巧

如果你是一名 Web 开发人员，那么你肯定会花不少时间在浏览器开发工具或 Web 控制台中，审查元素、修改 CSS 或在控制台中运行命令，这些是每个 Web 开发都知道如何使用的一些基本操作，但其实上我们还可以在浏览器内完成很多其他事情，让你的调试、开发和网页设计更加高效。以下是 Chrome DevTools 的一些隐藏的或鲜为人知的功能......

03

iconfont的几种引用方式

说起阿里的iconfont，肯定都用过FontAwesome，相比之下，二者都是免费的图标，引用方式大差不差。从兼容性的方面来讲，iconfont支持所有低版本浏览器，而FontAwesome只支持IE7+的高版本浏览器，从图标美感和数量方面来讲，这都不用比，显然iconfont更胜一筹，从使用上讲，iconfont也更为灵活，不像FontAwesome那样，需要引入整个文件包里的文件到项目，显得臃肿，FontAwesome有文档支持，而iconfont在下载添加图标时会有一个demo文件供参考，也是一个不错的参考方法。

02

10个必须知道的Chrome开发工具和技巧

我们可能习惯了在城市的网速，那是杠杠的，并不意味网速在中国哪个都一样的，在一些偏远地方，网速依然慢的可怜，所以有时候我们所做的产品是需要考虑网速慢的情况的，那怎么模拟呢？

02

干货：CSS 专业技巧

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：

05

10个 Chrome 开发工具和技巧

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

03

Bootstrap实用手册

Responsive Web Page，响应式网页/自适应网页，即一个页面既可以在 PC 浏览器中浏览，也可以在手机、平板中浏览，并且配合不同设备有不同的响应结果，响应式网页的特点：

02

Web元素定位工具-ChroPath

3、ChroPath支持iframe，多选择器生成，动态属性，使用自定义属性生成相对xpath，自动化脚本步骤生成。

01

04-移动端开发教程-在线字体图标

本文主要介绍了在移动端网页开发中，如何利用web font和自定义字体实现字体图标。首先介绍了字体图标的原理和分类，然后介绍了如何在移动端网页中使用字体图标。最后列举了几个常用的字体图标工具，以及如何在这些工具中使用自定义字体。

06

04-移动端开发教程-在线字体

在IE4开始微软就已经开始支持在线字体，不过没有流行起来，直到CSS3新增加了font-face模块，正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1. 为什么要用在线字体问题精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求在线字体带来的革命：在线字体本质就是文字，但是也可是像图形的文字。节省了带宽（相比图片）字体文件大小也不大（一般几百k）。在线字体本身是矢量的，放大缩小都不会失真可以灵活的通过

06

这30个CSS选择器，你必须熟记（上）

CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计，我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等，我们只需要改几行代码，不需要借助任何软件，就能轻而易举的实现，感觉就像魔法师一般，几秒钟就能得到一个想要的效果，是不是很酷呢。

02

这30个CSS选择器，你必须熟记（上）

css的魅力就是让我们前端工程师像设计师一样进行网页的设计，我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等，我们只需要改几行代码，不需要借助任何软件，就能轻而易举的实现，感觉就像魔法师一般，几秒钟就能得到一个想要的效果，是不是很酷呢。

01

26 个 CSS 面试的高频考点助力金三银四

CSS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML和Javascript。

02

利用属性选择器对外部链接进行样式设计

你可能会注意到，你访问的一些网站上的外部链接旁边会显示一个小图标。这对用户来说非常有帮助，因为它让他们知道这个链接会将他们带到站点外部。

01

网站性能优化(一)减少HTTP请求数量

当然，HTTP 1.1 中已经支持了持久连接-keep-alive，即一个TPC/IP连接中，可以连续发起多次HTTP请求。随后，采用“管线化”技术，能够做到同时并行发送多个HTTP请求，而不需要一个接一个等待响应（Chrome目前支持在一个域名domain下，同时发起6个并行的HTTP请求）。尽管这样，为了进一步提高网站性能，还是需要考虑如何有效的减少HTTP请求数量。

03

20个惊艳的React组件库，每一个都值得收藏（上）

在当今的前端开发领域，React无疑是一颗耀眼的明星，它以其灵活和高效赢得了无数开发者的青睐。正因如此，围绕React，涌现出了大量的组件库，这些组件库大大简化了开发过程，让开发者可以更专注于创意和业务逻辑的实现。

01

30道CSS 面试知识点总结

CSS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML和Javascript。

02

基于Vue2.x的UI组件库引入Iconfont图标库（引入第三方图标库篇）

本篇笔者将讲解在Vue项目中如何引入第三方图标库，如：Inconfont https://www.iconfont.cn fontawesome https://fontawesome.io/ 登录到Iconfont官网，然后选择你想要的图标，添加到购物车里。最后添加到你的项目里。

01

Taro框架使用第三方icon

我们在使用Taro开发小程序时，有时候需要用到ico图标，但是当Taro UI 自带的icon不能满足我们的要求时，我们需要导入第三方字体图标库。

三个Bootstrap免费字体和图标库

前言：Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单，深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快，组件无数可复用的组件,包括字体图标，在网页制作中我们经常用到小图标(icon),在Bootstrap中提供了很多这种小图标,在这篇内容中,我们把这套框架上的免费字体图标做了个小整合(当然,以后还会不断的更新) Font Awesome 官方网址：http://fontawesome.io/ http://font

04

掌握Chrome开发工具：新一代前端开发技术

你可能已经熟悉了Chrome开发工具的基本功能。: DOM检查器、样式面板和JavaScript控制台。但也有一些不太为人所知的特性可以显著提高你调试或开发应用的速度。

02

【CSS】636- 你必须记住的30个css选择器

星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。

03

掌握Chrome开发工具，做新一代前端开发

你可能已经熟悉了Chrome开发工具的基本功能。: DOM检查器、样式面板和JavaScript控制台。但也有一些不太为人所知的特性可以显著提高你调试或开发应用的速度。

05

django2用模板代码图标字体丢失报404 cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff

以前开发网站，不是用php就是用c#或java写后端，跟后端繁重麻烦的代码相比，前端的html+css+JavaScript简直就简单的不算技术，相比之下，工作量也不大。但如果用django框架，使用python来写后端逻辑，正所谓美女都是需要通过比较而来的，因为python更加的简洁优雅，相比之下，前端松松垮垮的JavaScript，七扭八斜的css，简直麻烦的让人想砸电脑，本来相较于后端工作量较小的前端开发，瞬间成为了整个项目至少百分之八十的工程量！于是，使用前端模板，就成了一个必由之路！但，dj

03

10 个web前端开发者都应该知道的提升工作效率的网站

英文 | https://medium.com/geekculture/10-killer-website-that-every-programmer-should-know-6ad4356a9b96

02

你现在可以玩下这 5 个 CSS 新功能

在浏览器开始实现它们之前，CSS 新的功能通常需要经过长时间讨论之后，才在W3联盟的规范中定义。有许多值得一提的 CSS 新功能，但是在本文中，我们重点介绍可以浏览器的稳定版中进行测试的五个功能：

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭