首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用鼠标悬停为每个Font Awesome图标设置不同的特殊颜色

Font Awesome是一个非常流行的图标字体库,它提供了各种各样的矢量图标,可以通过CSS样式来使用。要为每个Font Awesome图标设置不同的特殊颜色,可以使用CSS的:hover伪类选择器来实现。

首先,确保你已经将Font Awesome的CSS文件链接到你的HTML文件中。然后,为每个图标创建一个带有唯一类名的HTML元素,例如使用<i>标签,并为其添加Font Awesome的类名,如"fa"和"fa-icon-name"。

接下来,在CSS中,使用:hover伪类选择器来为每个图标设置不同的特殊颜色。例如:

代码语言:txt
复制
.fa-icon-name:hover {
  color: red;
}

在上面的代码中,.fa-icon-name是你为每个图标创建的唯一类名,:hover伪类选择器表示当鼠标悬停在该元素上时应用的样式。将color属性设置为你想要的特殊颜色,这里设置为红色。

这样,当鼠标悬停在特定图标上时,它的颜色将变为你所设置的特殊颜色。

关于Font Awesome的更多信息和使用方法,你可以参考腾讯云的Font Awesome产品介绍页面:Font Awesome产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于 Butterfly 外挂标签引入

Markdown 编写文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式文档。 Markdown 编写文档后缀 .md, .markdown。...默认情况 success error warning bolt ban home sync cogs key bell 自定义font awesome图标 {% tip %}默认情况{% endtip...awesome图标{% endtip %} 动态标签 anima 动态标签实质是引用了 font-awesome-animation css 样式,不一定局限于 tip 标签,也可以是其他标签。...只不过这里 tip.js 是我自己写,所以我清楚它会怎么被渲染成 html,才用这个写法。 可以熟读文档,使用 html 语言来编写其他标签类型。...标签语法 配置参数 样式展示 显示代码 {% tip [参数,可选] %}文本内容{% endtip %} 更多详情请参看 font-awesome-animation 文档 将所需 CSS 类添加到图标

1.1K30

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

Font Awesome介绍 Font Awesome您提供可缩放矢量图标,您可以使用CSS所提供所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持效果。...可适配于屏幕阅读器 与其它字体不同Font Awesome不会影响屏幕阅读器正常工作。 背景 网页小图标到处可见,如果一个网页都是干巴巴文字和图片,而没有小图标,会显得非常简陋。...(注意,在“fa-link”前面还要加入一个“fa”类,例如 ) 2.3 设置大小和颜色 学会了以上简单使用设置颜色和大小非常简单,只要你会用css设置文字颜色和大小就行...而对于字体,虽然WPF是直接支持,但由于字体图标特殊性,要将其显示图标还是需要费点劲。本文这里就以Font-Awesome例,介绍一下如何在WPF中使用字体图标。...,将TextBlockText设置图标对应文字,设置其FontFamilyFontAwesome即可。

2K20

2021 年 Web 开发常用五个图标库(建议收藏)

img Icons8 是最受设计师和开发者欢迎图标库之一。它提供超过 140000 个图标,涵盖 35 个不同类别供你使用开发项目找到最合适图标组合是你最忙碌耗时任务之一。...Icons8 主要特点 并不是所有的图标都需要注明出处。 在下载之前完成自定义图标设置。 你可以找到任意颜色、大小和格式图标。 有不同图标样式可供选择。(填充图标、线条图标、实心图标等。)...缺点 使用免费版本时需要提供注明出处。 3. Font Awesome ? img Font Awesome 是开发者常用另一个流行图标库,主要是因为它直接支持 Bootstrap 和 CSS。...Font Awesome 没有提供 Icon8 或 Flaticoin 之类编辑选项,但你提供了 CSS 类,可以直接在 HTML 中定义使用。...Font Awesome 全局 CDN 和缓存可用于更快地加载图标。 专业版价格每年 99 美元,包括自定义设置,人工技术支持,专业版下载,标准专业证书和其他功能。 4. Fontisto ?

1.4K10

2021 年 Web 开发常用五个图标库(建议收藏)

ICONS8 img Icons8 是最受设计师和开发者欢迎图标库之一。它提供超过 140000 个图标,涵盖 35 个不同类别供你使用开发项目找到最合适图标组合是你最忙碌耗时任务之一。...Icons8 主要特点 并不是所有的图标都需要注明出处。 在下载之前完成自定义图标设置。 你可以找到任意颜色、大小和格式图标。 有不同图标样式可供选择。(填充图标、线条图标、实心图标等。)...缺点 使用免费版本时需要提供注明出处。 3. Font Awesome img Font Awesome 是开发者常用另一个流行图标库,主要是因为它直接支持 Bootstrap 和 CSS。...Font Awesome 没有提供 Icon8 或 Flaticoin 之类编辑选项,但你提供了 CSS 类,可以直接在 HTML 中定义使用。...Font Awesome 全局 CDN 和缓存可用于更快地加载图标。 专业版价格每年 99 美元,包括自定义设置,人工技术支持,专业版下载,标准专业证书和其他功能。 4.

1.4K30

如何写好css系列之button

但我个人练习自己如何写好一个css框架,对自己前端能力提升还是有帮助。所以本人以此为目标和动力。展开了这个系列博客之旅。开篇以button起点。 一、与美术交流获取得这些信息 1....按钮状态:普通状态、鼠标悬停、选中状态、禁用状态 2. 按钮形状:常用形状(有背景),简单形状(无背景),图标按钮、多文字按钮、fullwidth按钮 3....其他:按钮可以分组、a标签与button标签表现要一致 二、已实现示例效果展示 ? 三、实现具体细节阐述 本次使用sass作用css预编译器,代码结构如下: ? 说明: 1...._button.onlyIcon.scss:图标按钮实现,在这里申明:图标都是使用font-awesome。 4. _button.link.scss:对按钮扩充a标签也能支持 5....从sass代码中可以看出,我循环了一个colors数组,这里就是为了创建多种不同状态按钮,如:正常、警告、提示等,因为他们背景或字体颜色是有区别的。 3.2.

1.1K70

Apriso 开发葵花宝典之四 CSS 篇

不同Panel设置不同样式名称 可以设置样式名称,也可以直接设置行内(Inline Style)样式 2、Form样式引入 每个Form ControlAdvanced也中可以设置样式 设置自定义样式名称...样式分类和样式名称整理如下(详见http://[ServerName]/Apriso/Help/en-us/CSS/index.htm): Awesome Font字体图标用法 Font Awesome...您提供可缩放矢量图标,您可以使用CSS所提供所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持效果。...1、基本用法 可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀fa,再加上图标名称。Font Awesome使用内联元素而设计。我们通常更喜欢使用,因为它更简洁。...i class="fa fa-camera-retro fa-lg"> 固定宽度:使用 fa-fw 可以将图标设置一个固定宽度

22330

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

本文主要介绍font-awesome-4.7.0引入和使用 每日一言:将来你一定会感谢现在奋斗自己。...本文主要介绍font-awesome-4.7.0引入和使用 ---- 字体下载及目录上传 -font-awesome中文官网 点击进入font-awesome中文网,即可进入如下图所示界面,然后点击下载旧版...v4.7按钮,下载字体压缩包然后解压文件夹到桌面或者其他目录 font-awesome中文网界面 -font-awesome目录上传 将font-awesome上传到网页服务器目录中(ps:请上传整个目录...例) 在后台外观中找到开发者设置——自定义输出head头部html代码(其他blog也类似或者直接去源代码里找!)..."> 博客链接引用 ---- 字体图标引用 首先按如下图操作所示,来到font-awesome官网找到图标 然后点击选择一个你想要使用字体图标,进入界面 字体图标 进入改字体图标的界面后,如下图所示复制方框内代码

69030

web开发中插入FontAwesome 图标字体库

Font Awesome是一套绝佳图标字体库和CSS框架,它是可缩放矢量图标,用户可以可以对图标的特性进行更改,比如大小、颜色、阴影等并且可以组合不同图标创造自己喜欢图标。...Font Awesome产生,网页设计和Web前端开发人员带来极大方便 Font Awesome官网:https://www.fontawesome.com.cn/ 可以引入在线css。...:font-awesome图标可以引用在任何地方,只要在该元素类中加入前缀fa,在加入对应图标名称。...、 注:Font Awesome 设计与内联元素一起使用。...和 元素广泛用于图标。 可以直接对图标的属性进行更改,如图标颜色、大小,并且可以组合不同图标形成所需图标等。

1.8K30

Ways to Use Icons on Android (1)

Drawable Importer功能可以快速导入PNG或者JPG格式图片文件,还可以设置大小和颜色。...每个图标都有一个key和character,key代表图标的名称,例如fa-ok,character代表图标对应Unicode,例如\u4354。...、IconButton、IconToggleButton以及IconDrawable等,核心实现在ParseUtil类中,它compute方法会去解析设置文本内容,从中提取出不同字体对应图标,甚至设置其大小和颜色以及旋转动画效果...如果想要扩展Iconify,只需要一个ttf字体文件和实现IconFontDescriptor接口类就行了,可以参考Font Awesome图标字体集合实现。...为了方便使用,一般还会添加一个枚举,列举出这个图标字体集合中所有图标的key和character对应关系,以Font Awesome图标字体例: public enum FontAwesomeIcons

46520

每日分享html特效篇之一个菜单栏、一个渐变背景、一个加载特效、七个导航栏特效

添加了图层 在网站制作过程中加上特效,每个元素都在用户滚动页面或者是鼠标经过地方有动态效果,就像在平面层上多出了一个动态层,这样看起来更加有层次感。...(鼠标选中时状态宽度)*/ height: 600px;/* 设置左边显示(鼠标选中时状态高度)*/ /* 绝对固定定位 */ position: fixed;...z-index: -1;/* 将z轴设置-1不让其遮挡图标*/ background-color: rgb(255, 136, 0); } /* 设置上方快 */ .container .top...)*/ background-color: #222;/*设置跟着块上方颜色*/ border-radius: 0 0 0 20px;/*设置上方黑块左下角弧度*/..."> --> <link href="https://cdn.bootcdn.net/ajax/libs/<em>font</em>-<em>awesome</em>/4.7.0/css/<em>font</em>-<em>awesome</em>.min.css"

2.3K20

非样式布局

不然的话,先找到较通用“Microsoft Yahei”后,就使用“Microsoft Yahei”了,而不再使用特殊字体“PingFang SC”了。...* 背景颜色(纯色) * 渐变色背景 * 多背景叠加 指定两种渐变色 或 两张不同图片 * 背景图片属性(雪碧图) 雪碧图:把不同素材图片 集中到同一张图片上,以减少http请求...由于左边框和下边框之间衔接部分 是采用 斜切。左右边框设置透明,内容宽度设置0。 非布局样式 - 滚动 什么时候 会产生 滚动? 内容比容易多时候。...如果这些小图标颜色接近 可以减少 雪碧图大小。...图标字体:把图标做成文字,给他定义成特别的字体,在需要使用地方 引入该字体。 * base64使用 把图片变成文本一种方式,然后把base64字符串 内嵌到css中 进行使用

1.8K20

PPT缺少图标素材? 试试Font Awasome吧!

PPT整体质量, 和选取素材质量, 有很大关系~ 有些小伙伴, 即使花了很多精力, 也找不到好素材, 只好在元素装饰效果上做文章,结果就是越用心, 越丑陋 优秀图标素材, 往往能让整张PPT...简洁优雅, 下面教给大家如何快速用上优秀图标 ?...推荐一套名为Font Awesome 5 Free字体, 这套特殊字体, 可以将英文单词(关键词)转换为图标, 转换而来图标, 本质是一个字符(无限放大也会非常清晰), 你可以为它设置字号, 颜色..., 如果你用足够熟练, 可以直接通过输入关键词, 快速获取对应图标(提供1500个图标, 满足你大部分设计需求!)...小结 制作一份好PPT, 往往是一个系统工程, 优秀图标是很好工程材料, 值得我们花一些时间去研究 如果你无法下载资源包, 可以关注微信公众号jikeweikan, 回复Font Awesome,

82520

分享八个免费Vue图标库,轻松修饰你应用

Vue-awesome 也许大家知道 Font-awesome 之类比较流行图标库,就像各大组件库都有各自版本一样,它也有Vue版本 Github地址:https://github.com/Justineo.../vue-awesome 里面包括数千个高质量,可自定义图标,Vue-awesomeFont Awesome带入到Vue中,使开发者可以通过单个组件访问所有的免费图标。...它每个图标作为单个文件组件,所以可以准确导入每个Vue项目所需图标。 而且,该库使用是SVG图标,所以可以轻松更改来自定义自己喜欢图标 ?...官网:https://vuetifyjs.com/ 在图标方面,Vuetify使用了Material Design和Font Awesome库。...建立自己图标库 如果在不同库中选择SVG图标,可以用其他办法将这些图标聚合在一起。

6.8K21

简单聊一聊如何使用CSS父类Has选择器

它们允许开发者根据元素属性、位置和关系来选择和样式化HTML元素。 一个较新CSS选择器/伪类被称为 :has ,它允许您选择每个具有与您提供给 :has() 函数选择器匹配子元素元素。...它是一个强大CSS工具,您可以用于以下目的: 子元素父元素设置样式:如果一个 元素包含一个 元素,你可以使用 :has() 选择器来设置样式。...有条件地添加或删除样式:如果 元素包含特定数量子元素,您可以使用 :has() 选择器其添加边框。...导航菜单示例 这将引导我们进入我们项目的下一部分,它看起来是这样: 在这里,我们将鼠标移到位置上,您可以看到当我们将鼠标悬停在位置上时,我们拥有的不同位置。....nav__item:has(.nav__submenu)::after { font-family: "Font Awesome 5 Free"; font-weight: 400; content

60040

CSS学习记录及整理

CSS样式表插入方法有四种: 内联样式表,即写在标签内部,慎用; 内部样式表,使用标签在HTMLhead内定义样式表,用于文档内特殊样式; 外部样式表,使用<link rel=""...CSS三大特性 继承性--给父元素设置属性,后代元素都可以继承,但仅限于以(color/font-/text-/line)开头属性。...其中,a标签文字颜色和下划线不能继承;h标签文字大小不能继承。 层叠性--指CSS处理冲突能力,当不同选择器选中同一标签并且设置了相同属性时,就会出现冲突,这时CSS就会将多重样式层叠一个。...a标签(链接)颜色,包括未访问/已访问/鼠标悬停/鼠标长按时显示效果。...另外,:hover还可以用于选中所有的其它标签,比如div:hover,当鼠标悬停到div区域上时,会产生一个效果,可以用来设置动画。

6.9K80

每日分享html特效篇之五个加载页面特效和五个导航按钮特效

-- 是过滤中一种类型,使用矩阵来影响颜色每个通道(基于RGBA),可以将其想象成Photoshop中通道编辑一样 --> <feColorMatrix...a元素(图标)分别设置动画延迟 */ /* :nth-of-type(n)选择器是匹配属于父元素特定类型第n个子元素每个元素 */ .share-button a:nth-of-type(1){... <link href="https://cdn.bootcdn.net/ajax/libs/<em>font</em>-<em>awesome</em>/4.7.0/css/<em>font</em>-<em>awesome</em>.min.css...a:hover .layer{ /* 鼠标移入,该元素旋转-35度并倾斜20度 */ transform: rotate(-35deg) skew(20deg); } /* 鼠标移入,<em>设置</em><em>图标</em>外<em>的</em>每一层边框<em>的</em>样式...*/ .icon-box a:hover .layer i{ box-shadow: -1px 1px 3px var(--c); } /* 接下来<em>为</em>每一个按钮<em>设置</em><em>不同</em><em>颜色</em> */ .icon-box

7.9K20
领券