在伪元素中如何使用字体图标

最新推荐文章于 2023-04-20 21:56:44 发布
最新推荐文章于 2023-04-20 21:56:44 发布
阅读量1.1k 收藏 6
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/A_hapiness/article/details/125337836
版权

字体图标 项目集成 CSS main.js 内容替换
关键词由优快云通过智能技术生成
本文介绍了如何下载并使用字体图标。首先，下载字体图标文件并将其放入项目目录。然后，在main.js中引入字体文件。接着，在CSS中通过设置content为'e601'（替换为实际代码）及font-family为'iconfont'来使用图标。最后，确保加入特定代码以使图标生效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ZH彪关注

0.1022020.07.10 00:22:37字数 54阅读 1,552

一、下载字体图标

image.png

二、将下载的字体图标放到项目中

image.png

三、在main.js中引入

image.png

四、在css中的使用

&::after {
  content: '\e601';
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

content中写的内容就是：\ + &#x后面的e601

image.png


必须加上这段代码才生效

image.png

A_hapiness
关注
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
m0_55916923的博客
05-28 3071
1.在阿里巴巴矢量图标库中，找到你喜欢的字体图标，选择添加入库（即购物车图标） 2.点击在页面右上方的“购物车” 3.选择“添加到项目”，（没有项目可以创建一个） 4.进入项目之后，选择“Font class”模式，再点击下载至本地5.在你要用的项目目录下新增一个名为iconfont的文件夹，（这里我选择项目中的css文件夹中​​​​​​） 6.解压刚刚下载的压缩包，将iconfont文件放入到项目的css文件中，而后四个文件放入到刚刚新增的iconfont文件中（简单点的话，可以把整个解压..
伪类选择器中如何使用字体图标
一只小白657的博客
10-30 986
下面以阿里的iconfont为例 前面的下载可见之前的帖子关于阿里巴巴iconfont的使用 后续步骤是 将font文件夹与html文件放在同一个文件夹 在html文件中引入字体图标 即写入这样一句代码<link rel="stylesheet" href="font/iconfont.css"> 要注意引入的是.css文件 伪类选择器中进行调用 font-family: 'iconfont;' content: '\e473' 注意： 要将字体图标的编码里的’&#x
CSS之通过伪元素添加图标字体
qq_34550459的博客
04-17 2241
这里使用的是Font Awesome图标字体库 通过伪元素设置图标字体： 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab: font-family: ‘Font Awesome 5 Brands’ fa,fas: font-family: ‘Font Awesome 5 Free’; font-weight: 900; D...
css3伪元素字体图标
weixin_42378409的博客
03-16 313
伪元素 添加字体图标 案例
Write less，do more
06-24 1516
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face
字体图标的使用
m0_58467224的博客
06-09 70
字体图标
伪元素选择器使用场景——阿里图标字体
YuKing_HONG的博客
11-21 294
效果如下，制作一个下拉框，箭头用字体库做。
利用阿里巴巴的字体图标的引入和伪元素选择器使用字体图标
tingzizhilian的博客
01-15 266
阿里巴巴字体引入方式。
使用CSS伪元素实现文字部分变色的方法
09-25
我们需要设置`.hf`类的基本样式，使其具有`display: inline-block`以保持文本在同一行内，`font-size`和`line-height`用于调整字体大小和行高，`color: #000`定义默认颜色，`position: relative`用于定位伪元素，`...
利用伪元素制作字体图标并且鼠标经过时改变
qq_41994014的博客
11-05 1243
1、下载字体图标 2、将解压的项目放入到本地项目 3、在解压后的iconfont.css文件引入到自己的项目中 4、利用伪元素（此处用的after）来制作字体图标 .box::after { position: absolute; right: 20px; top: 10px; content: "\e60c"; font-family: "iconfont";
E601驱动器说明书
06-12
适用于自动化领域，对于当前永磁电机趋势的社会，此款驱动器不错
css---伪类使用字体图标（iconfont/FontAwesome）等
weixin_44875693的博客
04-12 1418
1.找到要使用图标的Unicode字符 2.代码中添加 .el-form-item__error:before { content: '\f06a'; font-family: FontAwesome; //FontAwesome图标 } &::after { content: '\e60b'; font-family: "iconfont"; //iconfont 图标
【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 1251
一、icommon 字体图标基本使用 1、生成 icommon 字体文件 2、字体图标基本使用 二、使用伪元素实现 icommon 字体图标显示
使用CSS3伪元素引入阿里巴巴的字体图标
qq_42919799的博客
11-04 973
使用CSS3伪元素引入阿里巴巴的字体图标 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.需要引入文件 -
css进阶篇（浮动、定位、垂直居中、选择器、伪元素添加字体图标）
weixin_43847807的博客
10-20 808
定位浮动篇定位相对定位绝对定位固定定位粘性定位 定位 相对定位 绝对定位 固定定位 粘性定位
伪类after before如何使用阿里的iconfont字体
szy1000的专栏
10-31 1万+
之前在做一个蛋糕项目的时候，设计给了我一个这样的图片（tips:[ “ \e60d”为蛋糕的小图标 ]） 当中的蛋糕图标，我的第一反应就是用before去做。然后把iconfont图标的十六进制的编码放到content里面去。 正所谓，理想很丰满，但现实很骨感！失败了！ 于是，我就翻起之前的文章是相关content字符编码的，戳我查看。 于是我换了一个content的值。尽然
css伪元素的实用技巧
qianfeng_dashuju的博客
08-17 417
1.定义 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before :after来在一个元素前、后增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 2.伪元素的单双冒号 在CSS2之前规范不明确的时，伪元素使用单冒号(:)来表示； 在CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类；但为了向上兼容，现在用单冒号（:）也可以的。 3.使用场景 下面运用before和after在元素前面和后面插入.
常用的HTML和CSS content属性特殊字符归纳
热门推荐
张鑫的博客
07-12 2万+
今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可能记得住，所以谷歌百度搜索之后找到了一个比较全的，在这里进行归纳备忘，为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。 因为这些字符属于unicode字符集，所以，我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式； 还有一点需要注意的是，部分字符在不同...
阿里iconfont图标的一些使用（hover）
qq_51110841的博客
04-26 2275
阿里iconfont的网站 ：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 1.iconfont的hover变色 css： .icongithubalt:before { content: "\eaf7"; font-size: 50px; cursor: pointer; display: block; height: 100px; width: 100px; text-align: cent
阿里巴巴字体图标下载与使用指南
2. 阿里巴巴字体图标：阿里巴巴字体图标是阿里巴巴集团推出的一套图标字体库，旨在提供一套标准、统一、且丰富的图标资源，以便开发者和设计师能够在不同的项目中快速使用。这套字体图标集通常包含了成百上千个常用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值