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选择器是否正确，最后确保字体文件加载成功。如果问题仍然存在，可以尝试清除浏览器缓存或使用其他浏览器进行测试。

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

相关·内容

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

网页中应用font-awesome：去官网下载，解压之后，应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档，font文件夹中存放在着适用于不同浏览器的字体文件。...引用CSS文件之后，接下来就可以使用图标了。...例如，我要在页面中显示一个“链接”的图标，我可以这么写：链接此时页面将显示：显示是显示出来了，那么对应链接的这个css...在WPF中使用FontAwesome之类的字体图标在WPF程序中，一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。...="14" /> 请注意我这里的FontFamily的设置，我是采用的嵌入字体的方式，这样在没有装该字体的机器上也是能正确显示图标的。

2.1K2 0

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

目前图标字体非常流行，图标字体使用简单，与图片格式的小图标相比，支持视网膜显示，可以无限放大。特别是一些响应式设计的主题模板，都会或多或少使用图标字体。...二、WP后台---外观---菜单，进入菜单设置页面，选择并编辑一个菜单项，在CSS类中输入一个图标字体选择器名称，如图： ?...如果在编辑菜单项目面板中无CSS类，可以打开右上角的“显示选项”，在显示菜单高级属性中勾选“CSS类”。（今天才发现有这个的！！！）...图标字体选择器名称，打开此页查看：http://fontawesome.io/icons/ 点开一个认为合适的图标字体，在下会显示类似：只需在菜单...CSS类中输入fa fa-home就可以了。

2K1 0

关于博客代码区字体在Chrome游览器中显示不清晰问题的解决

版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文（Creative Commons）如果你使用的是Google Chrome游览器...，那么出现字体不清可能是由于Google浏览器默认字体对中文字体设置不兼容导致的。 ...Chrome设置字体步骤：设置 -> 字体->将四个默认字体选项按顺序设置为「Arial、Georgia、Arial、Consolas」。如下图所示。 ?

1.3K2 0

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

前言最近，在项目的开发中，我们规划了一个 Icon 组件，我们希望通过这个组件，能直接同时使用多种图标库的图标（一种语法,实现无限的图标扩展和高度兼容性）并且，实现该 Icon 之后，理应还有一个图标选择器...，可以加载出不同图标库的所有可用图标，方便直接选择使用，完整代码在文末提供。...Iconfont（阿里巴巴矢量图标库），实现了自动载入Font clas(css链接,载入后即可通过class来使用对应的字体图标)，实现Icon组件的语法兼容性，然后自动解析出Font class内的所有图标名称...FontAwesome，这是一款很常用的图标库，包含了675个图标，Icon组件实现了自动加载，语法兼容；并且自动解析所有图标名称，以供图标选择器使用。...，现在只需获取该属性值再进行简单处理即可，我们在/src/utils/iconfont.ts文件中，定义了获取本地图标名称列表的函数：export function getLocalIconfontNames

2.3K2 0

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

对于首次使用的用户，张戈博客还是继续介绍下好了！先贴一下效果截图，了解一下图标字体是个什么东东： ? 其实，就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现，即图标字体。...很简单，依次打开 WordPress 后台==>外观==>菜单，然后点开已有菜单，将得到的 class 填入到 CSS 类即可，比如我在官方图标库查到“家”图标的 class 是 fa fa-home，...保存之后，WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。如果发现点开菜单没有 CSS 类栏位怎么办？很明显，你没把这个功能开出来。...点击菜单页面右上方的【显示选项】，勾上 CSS 类即可： ? 如果发现点击【显示选项】没动静怎么办？看来你的 WordPress 也是升级 4.2 了。...不过这个 font-awesome.min.css 文件是压缩后的，看起来很晕！可以先百度搜一下 CSS 美化工具，将其格式化之后再来编辑！

3K5 0

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

css布局小技巧及font-awesome图标使用图片鼠标放上去遮罩效果，显示文字当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height...绘制尖角效果在网页中，有很多地方会用到尖角，尖角可以是图片的，也可以用css来绘制用一个div来绘制尖角 .a{ /*设置边框*/ border-top: 30px solid red...font-awesome图标是一个css的插件包，是一个以字体文件方式集成的图标，首先要下载插件包中文网站http://fontawesome.dashgame.com/ 英文网站http://fontawesome.io.../icons/ 下载好后解压，会得到如下文件将font-awesome-4.6.3 文件夹放入html工程目录里然后在html页面引入font-awesome-4.6.3 文件夹里的css样式在要使用的元素标签class

2K2 0

使用 Fontawesome 的 React 组件

Fontawesome 是一套图表字体库框架，我们经常在项目中用到它的各式各样的图标，本文介绍的是如何使用其 React 组件形式的包应用到项目中。...npm install react-fontawesome --save 导入 css 在项目的 head 标签中的导入 fontawesome 的 css 样式表。..."> 使用在某个组件中，你只需要先导入 react-fontawesome 包。...import FontAwesome from 'react-fontawesome'; 比如我们要显示一个向上的箭头图标，就像下面一样在 render 函数中调用即可。...stype 就是你给图标设置的样式。这个就用不多说了。相关

2.1K3 0

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

Audits Audits（审计）,这个功能其实一直存在，只不过在chrome 60之后，发生了翻天覆地的变化：引入了Google开源的另外一个项目：LightHouse。...Coverage Coverage 是chrome开发者工具的一个新功能，从字面意思上可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行，而哪些js和css是还没有用到的，如图，这是我在打开...image.png 如何打开caverage 前提：chrome浏览器的版本必须是59或以上，在ctrl+shift+i快速打开devtools，点击右上角的......如上图所示，最右边显示的是我们加载的css和js文件数量，红色区域表示已运行的代码，而青色表示已加载但未运行的代码。...可用来发现页面中尚未用到的js 和 css代码，你可以为用户只提供必要的代码，这样就可以提升页面的性能。这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用。 10.

1.3K2 0

10个 Chrome 开发工具和技巧

8513 0

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

图标字体介绍在介绍图标字体之前，不得不介绍图标格式ICON ICON是一种图标格式，我们操作系统中各种应用程序都包含一个图标比如QQ程序的图标是一个可爱的企鹅，我的电脑是一个显示器图标 --...-------------- 一个图标文件是扩展名为.ICO或者ICON的文件直到现在图标文件还是在计算机程序中随处可见但有时候需要在不失真的情况下放大图标因为ICON本身与JPEG\PNG...就是这种技术形式的一种实现（当然还有其他办法解决这种问题，比如用css3绘制图标，但那种技术形式就比较难应用于客户端程序中了） ---------------- 常见的图标字体有很多，但我认为Font-Awesome...是迄今为止最出色的图标字体（没有之一）图标多、图标美观、兼容各种应用场景是其最主要的有点 WPF中使用Font-Awesome图标字体我曾经在Qt应用程序中使用过Font-Awesome图标字体...，用起来非常方便，展现效果也一如预期但在WPF应用程序中使用图标字体就会显示成一个方框，如下图 ?

2.5K5 0

使用 Fontawesome 的 React 组件

2993 0

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

本文介绍的 Chrome 开发者工具基于 Chrome 65版本，如果你的 Chrome 开发者工具没有下文提到的那些内容，请检查下 Chrome 的版本简介 Chrome 开发者工具是一套内置于 Google...Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析打开 Chrome 开发者工具的方式有：在Chrome菜单中选择更多工具 > 开发者工具在页面元素上右键点击，选择 “检查...快速预览媒体查询点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式查看关联的 CSS 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义元素面板（Elements）...点击可以在 RGBA、HSL 和十六进制之间切换。调色板选择器。点击可以选择不同的模板。编辑 DOM Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。...点击左边的行号，这样一个蓝色图标就显示在行号上，表明该代码行设置好断点了。 ?

8.3K11 1

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

该系列是对我所使用的Next主题进行个性化定制，涉及到js和css等的修改，还有各种插件的使用，包括使用过程中的一些踩坑记录；另外也会对Next主题进行一些写作技巧的介绍与运用，希望能对大家有所帮助。...全局生效在NexT的主题配置文件 _config.yml中启用如下配置： 1 2 3 4 5 6 7 8 # Table Of Contents in the Sidebar # 侧栏文章目录设置 toc.../source目录下添加failure.ico，作为网站崩溃时显示的图标；这里的favicon-32x32.ico是你个人站点的图标，改成你自己的图标就好。...直接在这里添加 fontawesome 5的 CDN 会导致原本的图标全部显示不出来。...}}" rel="stylesheet" type="text/css" /> 在上边的代码后插入 fontawesome 5 的 CDN： 1 <link rel="stylesheet" href

8371 0

hexo 插件及 next 内置样式集

/images/loading.gif hexo-ruby-marks 不支持ruby新标签的浏览器将显示rp中的内容。...** %} 宅音乐侧栏播放器插件体验源码目前在 next 中可能引起部分 css 冲突，建议在 next 中使用在单个页面中。依赖于 jQuery，一行 js 可以引入播放器插件。...](https://www.runoob.com/font-awesome/fontawesome-tutorial.html) > Font Awesome 是一套绝佳的图标字体库和 CSS 框架。...> Font Awesome 字体为您提供可缩放矢量图标，它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。...; iframe 在文章中插入 iframe。

4811 0

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

Chrome开发工具的内置了黑色主题。你可以通过点击开发工具窗口右上角的三点图标，之后点击进入设置页面，切换主题。...如果要为这些伪态添加样式，可以添加一个新的选择器（使用“+”图标），并将:添加到选择器的结尾。...尽管在压缩过程中丢失了一些信息（例如变量名）,该工具对调试CSS和JavaScript文件还是很有用的。 Alt + Up / Alt + Down ?...代码覆盖率可以在运行Web应用程序后针对每个JavaScript和CSS文件，查看哪些代码行运行了，哪些代码没有运行。这是很有用的，因为在处理复杂或长期项目时，很容易在项目中累积无用的代码。...当你使用结束后，Chrome将向你显示操作期间运行的具体代码。调试用户遇到的问题通常来说调试工具只有在你自己的机器上才会生效。

1K2 0

FontAwesome基础知识

2019年实习时的 FontAwesome基础知识备份基本介绍及用法基本介绍 FontAwesome是一套绝佳的图标字体库提供可缩放的矢量图标可以使用CSS提供的所有特性进行更改，包括：大小、.../fontawesome/css/all.css" rel="stylesheet"> // 先引入fontawesome // 再引入需要的图标类别图标备忘录可在官方网址上搜索自己想要的图标也可直接下载为离线PDF文档搜索自己想要的图标。...列表中的图标使用fa-ul和fa-li替换无序列表中的默认项目符号。...Inner icons 在fa-layers元素内添加任意数量的图标 fa-layers-text 在fa-layers元素内添加以将文本放在图标顶部 fa-layers-counter 在图标右上方添加一个计数器

3101 0

从零开始学 Web 之 CSS3（六）动画animation，Web字体

moveTest; animation-duration: 2s; 如需在 CSS3 中创建动画，需要学习 @keyframes 规则。...在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。使用 @keyframes关键字来创建动画。...二、Web字体与图标 1、web字体我们有些时候需要在网页上显示一些特殊的字体，如果这些特殊的字体在电脑上没有安装的话，就会显示系统默认的字体，而不是这些特殊的字体。这时就有了 Web 字体。...之后在我们css样式里面使用@font-face关键字来自定义 Web 字体。 @font-face { font-family: 'shuangyuan'; src: url('.....的方式，fa-play是一个播放的图标，不同的图标的名字含义不同，只需要到 font-awesome 官网（http://www.fontawesome.com.cn/）找到对应的图标的名称即可。

1.4K1 0

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

我们用类选择器锁定了所有类名为 tweet 的元素。当然目前只有一个这样的元素，但如果有十个，那它们将都会是 Flex 容器了。 CSS 中以 . 开头的选择器代表类选择器。为什么是 .？我可不知道。...至少是在英文界面的布局中，文档流的方向是从左到右、从上到下的，因此，每个元素都 “依赖” 其左侧和上方的元素。在 CSS 中，每个元素的定位都受到其左侧和上方的元素的影响。...如果我们用浏览器调试工具将元素高亮显示，就会发现 p 和 ul 元素有默认的上下 margin（在 Chrome 的调试工具中，margin 以橙色显示，而 padding 以绿色显示）： ?...还有一处有意思的细节；行与行之间的上下 margin 是等距的 —— 并没有叠加出双倍间距！因为 CSS 在竖直方向上有 margin 坍塌现象。...在 .tweet 选择器上设置的 CSS 效果，其所有子元素都会继承。（除了按钮。

4.4K5 1

Web元素定位工具-ChroPath

2.在“元素”选项卡的右侧，单击“ ChroPath”选项卡，即最后一个选项卡。 3.要生成选择器，检查元素或单击任何DOM节点，它将生成唯一的相对XPath以及所有可能的选择器及其出现。...在ChroPath面板中滚动以查看所有生成的选择器。 4.要评估XPath / CSS，请输入XPath / CSS查询，然后按Enter键。输入后，它将在DOM中查询相关的元素/节点。...您可以按顺序出现的顺序查看匹配节点的总数和节点值。周围出现绿色轮廓以突出显示第一个匹配的元素，并在网页中以蓝色其余部分。...5.如果将鼠标悬停在ChroPath选项卡中的任何匹配节点上，则绿色/蓝色虚线轮廓将转换为点缀的橘红色，以突出显示网页中的相应元素。...7.如果找到的元素未突出显示但可见，则将鼠标悬停在ChroPath选项卡上匹配节点上时，它将突出显示带有点缀的橙红色轮廓的元素。 8.只需单击复制图标即可复制定位器。

2.3K1 0

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

1.3K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

相关·内容

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

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

关于博客代码区字体在Chrome游览器中显示不清晰问题的解决

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

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

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

使用 Fontawesome 的 React 组件

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

10个 Chrome 开发工具和技巧

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

使用 Fontawesome 的 React 组件

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

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

hexo 插件及 next 内置样式集

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

FontAwesome基础知识

从零开始学 Web 之 CSS3（六）动画animation，Web字体

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

Web元素定位工具-ChroPath

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

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐