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

最新推荐文章于 2022-08-13 11:34:58 发布
最新推荐文章于 2022-08-13 11:34:58 发布
阅读量1.7w 收藏 14
点赞数 9
分类专栏： css 文章标签： iconfont 伪类 content css 阿里
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011456552/article/details/52981371
版权

之前在做一个蛋糕项目的时候，设计给了我一个这样的图片（tips:[ “ \e60d”为蛋糕的小图标 ]）


当中的蛋糕图标，我的第一反应就是用before去做。然后把iconfont图标的十六进制的编码放到content里面去。

正所谓，理想很丰满，但现实很骨感！失败了！


于是，我就翻起之前的文章是相关content字符编码的，戳我查看。 于是我换了一个content的值。尽然成功了！


so!问题来了！为什么只能用一些预定义好的图标呢？阿里的图标为什么不能用啊！

今天一个偶然的机会，让我找到了解决的办法了。其实，很简单！只需要把iconfont类名下面的代码复制一份给伪类before就行了！


放水完毕！文章的内容水平不高！仅为记忆而用！如能帮你，我的荣幸！大笑

沈志勇说
关注
  • 9
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
CSS伪类对象before和after的用法实例详解
09-25
在CSS中，`::before` 和 `::after` 是两种伪元素，它们允许我们在一个元素的内容前后添加额外的内容。这两个伪元素通常与`content`属性一起使用，可以在不修改HTML结构的情况下增强页面的视觉效果或者实现某些特定...
在已有项目上添加iconfont字体图标
最新发布
weixin_46977882的博客
10-08 276
步骤三、如果下载的是svg文件需要在iconfont.js中加入新下载的iconfont.js中对应的<symbol></symbol>（不要全部替换，粘贴就行）并且粘贴iconfont.SVG文件到css\icon文件夹。步骤一、在原有的iconfont.css文件里边粘贴@font-face和.icon-jindudengdai:before（不要删除原 有的@font-face）步骤二、粘贴以下三个文件到css\icon文件夹。注：svg下载symbol文件。
:before/:after里iconfont的使用方法
u014608930的博客
12-30 9811
:before/:after是伪元素，fontawesome 是在伪元素的content加入不同的Unicode 来渲染不同的图标的 可以放在content 里啊，直接放在 html里的那是字符实体编码，比如 其中&#是开头用以标明这是字符实体，x表示这是十六进制，而CSS的content接受的也是16进制的Unicode编码，所以可以直接写 content: "\e7b
antd checkbox选中后样式 伪类::before暴力修改成iconfont图标
gd81325的博客
07-21 1616
效果如图 这里用到了阿里iconfont，需要引入 （没看什么有用什么没用，一顿试就对了。。） .ant-checkbox{ border: none; background: none; } .ant-checkbox-inner::after{ width: 0; height: 0; border: none; background: none; } .an
HTML字体及文本样式
xy25408的博客
08-16 6629
1.文本属性 1.1 颜色属性 color:值 英文单词：red、blue、pink… rgb ：r（red 红色）g（green 绿色） b（blue 蓝色） rgb(0,0,0) 每个值的取值范围在0-255之间，0代表不发光，值越大越亮 红色: rgb(255,0,0); 绿色: rgb(0,255,0); 蓝色: rgb(0,0,255); 黑色: rgb(0,0,0); 白色: rgb(255,255,255); rgba：和前面一样，只是多了透明度a，取值为0-1，值越小越透明
微信小程序的学习笔记--（一）iconfont的引入
小呀嘛麻的博客
10-24 1491
本人刚开始接触微信小程序的开发，写博客在于记录自己的学习历程，也希望各位大神能够指导一下小白*^_^* 1、微信小程序开发的准备工作 开发微信小程序前，首先去微信小程序官网下载微信小程序开发工具，官网地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，安装完成后，要进行后续项目的开发，需要申请一个...
阿里巴巴矢量图 常规使用方法 以及::after、::before中使用方法
Jing0921的博客
08-18 571
在官网中https://www.iconfont.cn/找的需要的图标 添加到购物车 去购物车 下载代码 解压后的目录 将iconfont.ttf添加到自己的项目目录里 如 打开 将底部 两段代码放入css中 路径要根据自身摆放路径确定 常规使用 ::after、::before中使用方法 h4::before{ content: '\e7c9'; font-family: "iconfont" !important; font-size: 16px; fo
CSS伪类:before在元素之前 :after 在元素之后实例讲解
09-25
特别地，CSS伪类中的`:before`和`:after`是生成内容的伪元素，它们能够在元素内容的前面或后面动态地添加额外的元素，让网页表现更加丰富和灵活。 ### CSS伪类:before和:after的基本概念 `:before`和`:after`被...
JS中使用 after 伪类清除浮动实例
10-20
在使用`:after`伪类清除浮动时，需要确保该伪元素不继承父元素的浮动属性，所以设置了`clear: both;`来确保这一点。同时，`content`属性设置为空字符串，`height`和`visibility`属性设置为`0`和`hidden`，是为了让这...
使用before和:after伪类制作css3圆形按钮
09-25
标题：“使用before和:after伪类制作css3圆形按钮”和描述：“主要介绍了使用before和:after伪类制作css3圆形按钮,需要的朋友可以参考下”说明本文将深入探讨如何利用CSS的伪类选择器:before和:after来创建美观的...
详解css3中的伪类before和after常见用法
01-18
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛，不过貌似...
如何在伪元素：：after ：：before内使用阿里字体图标
m0_61973028的博客
03-16 957
1、下载字体图标包（从你寻找心意的字体图标开始介绍） 解压压缩包在你想要的html页的同级（不在同级也行，自己导入的时候把路径写对）在文件夹里找到demo_index.htm 点开， 找到你想要的字体图标复制&#x之后的数字和字母 “\+e65e"放入content里。 ...
前端学习（205）:animation动画库
歌谣的博客
12-24 424
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
前端面试-html、css
cyj5201314的博客
08-13 441
答：伪元素引入iconfont使用unicode模式，给伪元素添加font-family：iconfont，设置content为对应icon的unicode编码即可，不会出现在dom中；答：圣杯：中间栏width100%，左右用padding给左右两栏留出位置，三栏全部浮动，左右两栏利用margin-left移动到对应位置，然后左右两栏使用相对定位到指定位置。双飞翼：中间栏两层dom，内层设置左右外边距给左右两栏留出位置，三栏全部浮动，左右两栏利用margin-left移动到指定位置。...
动态响应布局、iconfont笔记
m0_67390788的博客
03-18 1268
clip:rect矩形剪裁功能 rect(30px 200px 200px 20px) rect(top right bottom left) 参数：top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。 说明：裁剪矩形上边距上边的距离是30px 裁剪矩形右边距左边的距离是200px 裁剪矩形下边距上边的距离是200px 裁剪矩形左边距左边的距离20px :not li a:hover:not(.actio
ionic自定义图标（ion-icon）
qwe1314225的博客
08-26 3699
背景 ionic自带图标库有限，不能满足项目里面各种图标，需要自定义图标。 开始 下载图标库 从iconfont.cn上面搜索想要的图标，添加入库（也就是购物车那个图标） 添加到项目里面，一个项目肯定不止一个项目的，需要什么图标就添加什么图标，还可以添加小组成员，其他同事也能使用同一个图标库，太方便了。 从我的项目里面下载下来 添加文件到项目中 下载好了后，解压后的目录文件如下 选中如下6个文件到项目的assets/fonts/目录下面 由于项目里面用的scss，所以把上面那个iconfont
Linux常用命令
tian_tian2
07-07 322
Linux常用命令 一、文件/文件夹管理  ls 列出当前目录文件（不包括隐含文件）  ls -a 列出当前目录文件（包括隐含文件）  ls -l 列出当前目录下文件的详细信息  ls -lrt l表示显示详细列表，-t表示按时间排序,-r反向排序 cd .. 回当前目录的上一级目录  cd - 回上一次所在的目录  cd ~ 或 cd 回当前用户的宿主目录  创建文件夹 mkdir aaa
多个伪类before和after如何使用
05-12
可以通过使用逗号将多个伪类选择器连接在一起，来为同一个元素设置多个伪类样式。例如： ``` .element:before, .element:after { content: ""; display: block; /* 其他样式 */ } ``` 在上面的示例中，`.element` 元素的 `before` 和 `after` 伪类都被选中，并且设置了相同的样式。你也可以为每个伪类设置不同的样式，如下所示： ``` .element:before { content: "before"; color: red; } .element:after { content: "after"; color: blue; } ``` 在上面的示例中，`.element` 元素的 `before` 伪类显示为红色文本，`after` 伪类显示为蓝色文本。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值