伪类元素如何使用阿里的iconfont字体

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

伪类after、before如何使用阿里的iconfont字体


按照官方文档直接写16进制的字体代码是不能生效的，在content中使用unicode的== & #x33; == 这样的字体编码也是不能生效的。 在这里插入图片描述
那问题来了怎么办呢？ 其实解决方法很简单 直接把iconfont类名下面的代码复制给伪类一份 如图 在这里插入图片描述
这样十六进制的字体编码就能在伪类中使用啦！！！
做个笔记 希望也能帮助到需要的你

BroncLee
关注
css---伪类使用iconfont字体
cyl97的博客
04-13 530
自己记忆使用 使用第一种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-
伪元素选择器使用场景——阿里图标字体
YuKing_HONG的博客
11-21 300
效果如下，制作一个下拉框，箭头用字体库做。
伪元素使用——iconfont字体图标
im_joy的博客
07-17 450
伪元素使用——字体图标
uniApp之在伪类中使用iconfont
米拉
08-26 406
效果如下： THML： <view class="process"> <view class="ht">处理进度</view> <view class="processList"> <view v-for="(list,index) in processData.arrivalProcess" :key="index"> <text>{{list.content}}&l.
怎样把iconfont字体图标放到伪元素里
m0_72645422的博客
04-03 269
在伪元素里放字体图标
css3-iconfont伪类选择器的使用
Sivan56的博客
08-15 2057
css3-iconfont伪类选择器的使用 css的iconfont使用有三种方式，第一种方式是Unicode，第二种方式是fontclass，第三种方式是Symbol。在介绍iconfont伪类选择器的使用之前，我们来了解下iconfont的三种css表达方式。关于这三种表示方法在iconfont中都有简介。链接在这iconfont帮助文档 iconfont伪类选择器的使用 斜体样式笔者喜斜体样式欢直接引用例子，所以花里胡哨的表达就算了。 从iconfont上下载字体图标素材 关于素材的相关信息和使用方法
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
m0_55916923的博客
05-28 3089
1.在阿里巴巴矢量图标库中，找到你喜欢的字体图标，选择添加入库（即购物车图标） 2.点击在页面右上方的“购物车” 3.选择“添加到项目”，（没有项目可以创建一个） 4.进入项目之后，选择“Font class”模式，再点击下载至本地5.在你要用的项目目录下新增一个名为iconfont的文件夹，（这里我选择项目中的css文件夹中​​​​​​） 6.解压刚刚下载的压缩包，将iconfont文件放入到项目的css文件中，而后四个文件放入到刚刚新增的iconfont文件中（简单点的话，可以把整个解压..
利用阿里巴巴的字体图标的引入和伪元素选择器使用字体图标
tingzizhilian的博客
01-15 271
阿里巴巴字体引入方式。
网页设计必看：三步学会使用阿里iconfont图标
这种方法的优点是图标以字体形式存在，可进行颜色、大小、阴影等字体样式的变化，并且可以使用CSS伪元素添加额外的装饰效果。通过Web Font引用图标，需要在网页中添加相应的CSS和字体文件。 为了更好地理解这三种...
使用CSS3伪元素引入阿里巴巴的字体图标
qq_42919799的博客
11-04 984
使用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.需要引入文件 -
伪元素中以symbol方式引入iconfont图标
fernwehseven的博客
11-30 1559
伪元素中以symbol方式引入iconfont图标下载图标将字体文件引入项目在伪元素中使用字体图标 最近在做前端的一些基础练习时需要在伪元素中引入一些字体图标，在网上没有找到相关的教程，自己摸索了一下调试出来了。 下载图标 先在官网选择想下载的图标，加入购物车，然后在购物车中将选择的图标加入项目。 按照下图，选择以symbol的方式引入，然后点击下载至本地，你会得到一个压缩包。 将字体文件引入项目 将压缩包解压之后里面有一个demo_html文件，打开可以查看官方的三种 在body中 引入字体图标的方式。
css伪元素多类名（iconfont）
weixin_71133277的博客
07-08 623
css 伪元素设置多类名及iconfont伪元素多类名
iconfot图标用于伪类元素
summer鸿的博客
05-21 417
1.先在iconfont官网上去下载你所需要的图标，下载下来，如下 2.在css中去定义，因为我的项目不用兼容ie,所以引用ttf后缀的文件即可 @font-face{ font-family:'font-slider'; src:url('../fonts/iconfontSlider.ttf') } 3.下载下来的文件中有一个html的文件，直接在浏览器打开。 4.&#开头用以标明这是字符实体，x表示这是十六进制 5.li:after { con...
Iconfont的引用与在伪元素中的图标引用
imsopoor的博客
02-20 1080
在线引用 复制font class的在线链接 <link rel="stylesheet" href="http://at.alicdn.com/t/font_2171387_u0edhtw58g.css"> 在link标签href中黏贴（前面需要加上***http：***） 复制你需要使用图标的代码 在HTML中 类名里整上刚刚复制的代码 同时加上iconfont的一个多类名 在浏览器就显示 本地引用 下载本地后得到一个压缩包，解压后里面有这些文件 把这个文件夹可以命名为font
css图标字体 用伪元素 伪类设置图标字体 font awesome
m0_47001401的博客
07-12 1270
字体 font-awesome 的使用 用伪元素设置图标字体 通过实体设置图标字体
【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 1267
一、icommon 字体图标基本使用 1、生成 icommon 字体文件 2、字体图标基本使用 二、使用伪元素实现 icommon 字体图标显示
css进阶篇（浮动、定位、垂直居中、选择器、伪元素添加字体图标）
weixin_43847807的博客
10-20 829
定位浮动篇定位相对定位绝对定位固定定位粘性定位 定位 相对定位 绝对定位 固定定位 粘性定位
css---伪类使用字体图标（iconfont/FontAwesome）等
weixin_44875693的博客
04-12 1428
1.找到要使用图标的Unicode字符 2.代码中添加 .el-form-item__error:before { content: '\f06a'; font-family: FontAwesome; //FontAwesome图标 } &::after { content: '\e60b'; font-family: "iconfont"; //iconfont 图标
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值