伪类选择器中如何使用字体图标

最新推荐文章于 2022-11-29 11:46:42 发布
最新推荐文章于 2022-11-29 11:46:42 发布
阅读量884 收藏 9
点赞数 3
分类专栏： 笔记 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45139556/article/details/121058165
版权

下面以阿里的iconfont为例

前面的下载可见之前的帖子关于阿里巴巴iconfont的使用
后续步骤是

  1. 将font文件夹与html文件放在同一个文件夹
    在这里插入图片描述

  2. 在html文件中引入字体图标
    即写入这样一句代码<link rel="stylesheet" href="font/iconfont.css">
    要注意引入的是.css文件

  3. 伪类选择器中进行调用
    font-family: 'iconfont;'
    content: '\e473'

注意：

  1. 要将字体图标的编码里的’&#x‘改为‘\’,同时去掉尾部的;
  2. 字体图标显示不出来还可能是图标颜色与盒子背景颜色相重叠

下面是示范代码，引入如下所示的字体图标，编码为’&#xe743‘
在这里插入图片描述

<!DOCTYP
最低0.47元/天 解锁文章
一只小白657
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用阿里巴巴的字体图标的引入和伪元素选择器使用字体图标
tingzizhilian的博客
01-15 208
阿里巴巴字体引入方式。
css---伪类使用iconfont字体
cyl97的博客
04-13 432
自己记忆使用 使用第一种unicode方式， 把 &#x 替换成 / span:after { font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-
css伪类选择器-字体图标
lxllxl211的博客
10-11 325
把fonts文件夹复制到同一级文件夹：html文件和字体文件一样的位置。然后双击打开style.css文件夹。然后就是随便建个div。
css---伪类使用字体图标（iconfont/FontAwesome）等
weixin_44875693的博客
04-12 1301
1.找到要使用图标的Unicode字符 2.代码中添加 .el-form-item__error:before { content: '\f06a'; font-family: FontAwesome; //FontAwesome图标 } &::after { content: '\e60b'; font-family: "iconfont"; //iconfont 图标
伪类选择器配合阿里字体图标使用
qq_37873484的博客
06-17 397
首先引入 <link rel="stylesheet" href="./fonts/iconfont.css"> 然后再使用 div { width: 200px; height: 35px; border: 1px solid red; } div::after { content: '\e8b0'; font-family:
在伪元素中如何使用字体图标
A_hapiness的博客
06-17 1033
在伪元素中如何使用字体图标
CSS伪元素选择器案例.pdf
07-10
在实际的网页设计中，`::before` 和 `::after` 伪元素选择器常用于添加图标、装饰性的引号、页眉和页脚的特殊符号等。它们是CSS3引入的重要特性，极大地丰富了网页的视觉表现力，同时也简化了开发者的工作，无需额外...
详解CSS中的伪类与伪元素及二者间的区别
09-24
除了这些链接相关的伪类，还有许多其他伪类，如`:focus`(获取键盘焦点的元素)，`:target`(URL片段标识匹配的元素)，`:checked`(选中的表单元素)，`:not()`(排除选择器)，`:nth-child()`, `:nth-of-type()`等，它们...
使用CSS3 图标创建多级导航菜单
03-28
1. **选择器和伪类**：CSS3引入了更多高级选择器，例如`nth-child()`、`nth-of-type()`，这使得我们可以根据元素的位置或类型进行精确的样式设置。此外，`:hover`、`:active`和`:focus`伪类用于响应用户的鼠标悬停、...
网页制作中规范使用DIV.docx
11-28
- 使用CSS选择器如ID、Class、伪类等，以精确控制元素的样式。 - 在HTML中，适当结合使用`<h1>`, `<h2>`等标题标签和`.title`等类名，提高语义化。 6. **最佳实践** - 避免使用下划线`_`和短横线`-`作为CSS命名...
CSS按钮与伪元素
04-20
伪元素在CSS中用于创建不在HTML文档流中的虚拟元素，它们并不存在于HTML源代码中，但可以通过CSS选择器进行操作。常见的伪元素有`::before`和`::after`，分别用于在元素内容之前或之后插入内容。例如，可以使用`...
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
m0_55916923的博客
05-28 2603
1.在阿里巴巴矢量图标库中，找到你喜欢的字体图标，选择添加入库（即购物车图标） 2.点击在页面右上方的“购物车” 3.选择“添加到项目”，（没有项目可以创建一个） 4.进入项目之后，选择“Font class”模式，再点击下载至本地5.在你要用的项目目录下新增一个名为iconfont的文件夹，（这里我选择项目中的css文件夹中​​​​​​） 6.解压刚刚下载的压缩包，将iconfont文件放入到项目的css文件中，而后四个文件放入到刚刚新增的iconfont文件中（简单点的话，可以把整个解压..
CSS选择器 字体 引入方式总结
weixin_51745630的博客
05-05 820
CSS 一、选择器 选择器分为 基础选择器 和 复合选择器 1.基础选择器 基础选择器 由 单个选择器组成的 基础选择器 包括：标签选择器， 类选择器，id选择器，通配符选择器 （1）标签选择器 标签名{ atrribute name:value; } eg: P { color:red; } (2)类选择器 .类名{ attribute name:value; ...
前端学习（205）:animation动画库
歌谣的博客
12-24 405
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
【uni-app 怎么写伪类，怎么在伪类中使用icon字体图标】
TChildeSeven的博客
07-29 2029
uni-app 怎么写伪类，怎么在伪类中使用icon字体图标 1.问题描述，为什么要写伪类 大家是否在写代码中经常遇到这样的事情，如果写一个价格标签￥2.50，符号要小写，价格要变颜色，那你的第一想法是不是写两个标签和两个样式分开放？那写伪类相对于就方便很多，只需要写一个标签一个类名，就能相当于三个标签使用 2.怎么写伪类 先给需要写伪类的标签一个相对定位，然后通过::before或者::after在标签的前面或者后面添加伪类，一个标签一个类完成了两件事 <template> <vi
伪类after before如何使用阿里的iconfont字体
热门推荐
szy1000的专栏
10-31 1万+
之前在做一个蛋糕项目的时候，设计给了我一个这样的图片（tips:[ “ \e60d”为蛋糕的小图标 ]） 当中的蛋糕图标，我的第一反应就是用before去做。然后把iconfont图标的十六进制的编码放到content里面去。 正所谓，理想很丰满，但现实很骨感！失败了！ 于是，我就翻起之前的文章是相关content字符编码的，戳我查看。 于是我换了一个content的值。尽然
(转)CSS结合伪类实现icon
CaseyWei
11-29 1294
老规矩，还是先说说业务场景：有一个图片列表，可以添加、删除和更改，其中呢删除时设计给的设计稿时悬浮（hover）在图片上时显示删除的图标，所以就有了这个用before实现icon的场景。
用css 实现点击按钮后 原来显示的字体图标变为另一个新的字体图标
最新发布
05-23
可以使用CSS的伪元素（pseudo-element）和伪类（pseudo-class）实现这个效果。 首先，需要在HTML中添加一个按钮和一个显示字体图标的元素，例如： ```html <button id="changeIconBtn">Change Icon</button> <div id="icon" class="original-icon">A</div> ``` 其中，按钮的id为"changeIconBtn"，显示字体图标的元素的id为"icon"，并且初始状态下它的class为"original-icon"，表示显示的是原来的字体图标。 接下来，使用CSS为这些元素添加样式。首先，需要为"icon"元素设置字体和字体大小： ```css #icon { font-family: "Font Awesome 5 Free"; /* 字体图标库的名称 */ font-size: 24px; } ``` 然后，使用伪元素和伪类为"icon"元素添加两个不同的字体图标。在初始状态下，使用:before伪元素显示第一个字体图标；在按钮点击后，使用:after伪元素显示第二个字体图标。同时，为了实现点击按钮后字体图标的变换效果，可以使用:checked伪类和相邻兄弟选择器（adjacent sibling selector）来实现： ```css #icon:before { content: "\f007"; /* 第一个字体图标的Unicode编码 */ } #changeIconBtn:checked + #icon:after { content: "\f008"; /* 第二个字体图标的Unicode编码 */ } .original-icon:before { content: "\f007"; /* 在初始状态下仍显示第一个字体图标 */ } .new-icon:after { content: "\f008"; /* 在按钮点击后显示第二个字体图标 */ } ``` 最后，为按钮添加点击事件，当它被点击时，将"icon"元素的class从"original-icon"变为"new-icon"，从而触发字体图标的变换效果： ```javascript var changeIconBtn = document.getElementById("changeIconBtn"); var icon = document.getElementById("icon"); changeIconBtn.addEventListener("click", function() { icon.classList.toggle("original-icon"); icon.classList.toggle("new-icon"); }); ``` 这样就可以实现一个简单的点击按钮后字体图标变换的效果了。完整的代码如下： ```html <!DOCTYPE html> <html> <head> <title>Change Icon Example</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"> <style> #icon { font-family: "Font Awesome 5 Free"; font-size: 24px; } #icon:before { content: "\f007"; } #changeIconBtn:checked + #icon:after { content: "\f008"; } .original-icon:before { content: "\f007"; } .new-icon:after { content: "\f008"; } </style> </head> <body> <button id="changeIconBtn">Change Icon</button> <div id="icon" class="original-icon">A</div> <script> var changeIconBtn = document.getElementById("changeIconBtn"); var icon = document.getElementById("icon"); changeIconBtn.addEventListener("click", function() { icon.classList.toggle("original-icon"); icon.classList.toggle("new-icon"); }); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值