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

最新推荐文章于 2024-07-16 17:16:30 发布
最新推荐文章于 2024-07-16 17:16:30 发布
阅读量1k 收藏 6
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_hapiness/article/details/125337836
版权

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
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css伪元素的实用技巧
qianfeng_dashuju的博客
08-17 362
1.定义 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before :after来在一个元素前、后增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 2.伪元素的单双冒号 在CSS2之前规范不明确的时，伪元素使用单冒号(:)来表示； 在CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类；但为了向上兼容，现在用单冒号（:）也可以的。 3.使用场景 下面运用before和after在元素前面和后面插入.
伪类选择器中如何使用字体图标
一只小白657的博客
10-30 887
下面以阿里的iconfont为例 前面的下载可见之前的帖子关于阿里巴巴iconfont的使用 后续步骤是 将font文件夹与html文件放在同一个文件夹 在html文件中引入字体图标 即写入这样一句代码<link rel="stylesheet" href="font/iconfont.css"> 要注意引入的是.css文件 伪类选择器中进行调用 font-family: 'iconfont;' content: '\e473' 注意： 要将字体图标的编码里的’&#x
前端学习-css3的一些属性
fire_zero的博客
12-09 162
一.伪元素 伪元素: before,after 相当于是元素内部的两个子元素(盒子),分别是一前一后的两个盒子,默认显示模式是行内式 必写项 ：伪元素中必须有content属性，属性值可为空。 即，可以为 content:"" ; 其他属性和正常的行内式一样 例子： .box:before{ content:"我是before"; } .box:after{ content: "我是after...
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
m0_55916923的博客
05-28 2648
1.在阿里巴巴矢量图标库中，找到你喜欢的字体图标，选择添加入库（即购物车图标） 2.点击在页面右上方的“购物车” 3.选择“添加到项目”，（没有项目可以创建一个） 4.进入项目之后，选择“Font class”模式，再点击下载至本地5.在你要用的项目目录下新增一个名为iconfont的文件夹，（这里我选择项目中的css文件夹中​​​​​​） 6.解压刚刚下载的压缩包，将iconfont文件放入到项目的css文件中，而后四个文件放入到刚刚新增的iconfont文件中（简单点的话，可以把整个解压..
常见的content-type对应表
test的博客
07-07 1737
种类文件扩展名2003 Excel.xls2010 Excel.xlsx文本文件.txttext/plain图片image/*页面.htm/.htmltext/html视频video/*音频audio/*PDF.pdf。
使用CSS伪元素实现文字部分变色的方法
09-25
我们需要设置`.hf`类的基本样式，使其具有`display: inline-block`以保持文本在同一行内，`font-size`和`line-height`用于调整字体大小和行高，`color: #000`定义默认颜色，`position: relative`用于定位伪元素，`...
字体图标，APP图标库
11-19
3. 使用图标：在HTML中，通过设置`content`属性（通常在CSS的伪元素`:before`或`:after`中）来插入Unicode码，然后通过定义`font-family`属性确保使用正确的字体图标集。例如： ``` .my-icon:before { content: ...
详解CSS中的伪类与伪元素及二者间的区别
09-24
1. 表示方式：伪类只有一个冒号(:)，伪元素有两个冒号(::)（在CSS2.1中，伪元素也使用一个冒号，但在CSS3中进行了区分）。 2. 存在形式：伪类描述元素在特定状态下的表现，而伪元素则是在元素内部创建的虚拟内容，...
CSS按钮与伪元素
04-20
在实际应用中，我们常常结合使用CSS按钮和伪元素来实现复杂的布局和设计。比如，可以利用伪元素在按钮上创建自定义的悬停动画，或者在按钮内部添加动态加载的指示符。通过`position`属性（如`relative`、`absolute`...
CSS伪元素：after：before的特殊用法demo
06-19
- **导航栏效果**：在导航栏设计中，`:before`伪元素可以用于添加图标、分隔符或者动态效果。例如，可以为每个导航链接添加一个图标，或者在链接之间创建分隔线，增强视觉效果，同时保持HTML结构简洁。 3. **...
css属性 content
liting_1992的博客
10-29 1万+
CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。 值 1.默认值：normal：: :before 和 :after 伪类元素中会被对待none 2.none ： 不会产生伪类 3.string 4.url：图片路径。URI 值会指定一个外部资源（图片的url）。如果该不能展示，它会被图片忽略或显示一些占位（如无图片标志）。 注：这种方式引入的图片，无法设置图片的宽高 5.attr()：
常用的HTML和CSS content属性特殊字符归纳
热门推荐
张鑫的博客
07-12 2万+
今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可能记得住，所以谷歌百度搜索之后找到了一个比较全的，在这里进行归纳备忘，为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。 因为这些字符属于unicode字符集，所以，我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式； 还有一点需要注意的是，部分字符在不同...
阿里iconfont图标的一些使用（hover）
qq_51110841的博客
04-26 2047
阿里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
CSS之通过伪元素添加图标字体
qq_34550459的博客
04-17 2125
这里使用的是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】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 1102
一、icommon 字体图标基本使用 1、生成 icommon 字体文件 2、字体图标基本使用 二、使用伪元素实现 icommon 字体图标显示
css---伪类使用字体图标（iconfont/FontAwesome）等
weixin_44875693的博客
04-12 1314
1.找到要使用图标的Unicode字符 2.代码中添加 .el-form-item__error:before { content: '\f06a'; font-family: FontAwesome; //FontAwesome图标 } &::after { content: '\e60b'; font-family: "iconfont"; //iconfont 图标
利用伪元素制作字体图标并且鼠标经过时改变
qq_41994014的博客
11-05 1157
1、下载字体图标 2、将解压的项目放入到本地项目 3、在解压后的iconfont.css文件引入到自己的项目中 4、利用伪元素（此处用的after）来制作字体图标 .box::after { position: absolute; right: 20px; top: 10px; content: "\e60c"; font-family: "iconfont";
使用CSS3伪元素引入阿里巴巴的字体图标
qq_42919799的博客
11-04 898
使用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.需要引入文件 -
Web前端-Web开发CSS基础3-盒模型
最新发布
a15735748145a的博客
07-16 447
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
伪元素使用iconfont
08-17
接下来，在伪元素中使用字体图标即可。具体操作方法可以参考所引用的和。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [伪元素中以symbol方式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值