怎样把iconfont字体图标放到伪元素里

于 2023-04-03 11:18:13 发布
阅读量207 收藏
点赞数
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72645422/article/details/129925099
版权

1、下载图标后，引入到 html 文件里

 2、在 less 文件里写伪元素

 

巴布达多
关注
css---伪类使用iconfont字体
cyl97的博客
04-13 478
自己记忆使用 使用第一种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字体图标
m0_69793485的博客
05-11 1004
字体图标： 字体图标展示的是图标，本质是字体。 用来处理简单的、颜色单一的小图标。 字体图标的优点： ①.可以灵活的修改样式，字体大小等。 ②.体积小，可以降低服务器请求的次数。 ③.几乎兼容所有主流浏览器，使用简便。 总结 1.遇到一些结构和样式比较简单的小图标，就用字体图标。 2.如果遇到一些结构和样式比较复杂的小图片，就用精灵图 字体图标的使用 ①.Icommoon ②.阿里巴巴字体库 （常用） 下载字体包 阿里巴巴字体库：https://www.iconfont.cn/ .
伪元素使用——iconfont字体图标
im_joy的博客
07-17 422
伪元素使用——字体图标
伪元素中以symbol方式引入iconfont图标
fernwehseven的博客
11-30 1471
伪元素中以symbol方式引入iconfont图标下载图标将字体文件引入项目在伪元素中使用字体图标 最近在做前端的一些基础练习时需要在伪元素中引入一些字体图标，在网上没有找到相关的教程，自己摸索了一下调试出来了。 下载图标 先在官网选择想下载的图标，加入购物车，然后在购物车中将选择的图标加入项目。 按照下图，选择以symbol的方式引入，然后点击下载至本地，你会得到一个压缩包。 将字体文件引入项目 将压缩包解压之后里面有一个demo_html文件，打开可以查看官方的三种 在body中 引入字体图标的方式。
Iconfont的引用与在伪元素中的图标引用
imsopoor的博客
02-20 982
在线引用 复制font class的在线链接 <link rel="stylesheet" href="http://at.alicdn.com/t/font_2171387_u0edhtw58g.css"> 在link标签href中黏贴（前面需要加上***http：***） 复制你需要使用图标的代码 在HTML中 类名里整上刚刚复制的代码 同时加上iconfont的一个多类名 在浏览器就显示 本地引用 下载本地后得到一个压缩包，解压后里面有这些文件 把这个文件夹可以命名为font
阿里字体图标iconfont在伪元素里面使用方法
前端一线搬运工的博客
10-13 8670
首先我们知道iconfont字体图标代码如 &amp;#xe601; 代码分解: 字体图标由 &amp;# 和 x 以及 四个数字\字母 组成; 工作原理: 其中&amp;#表示这是字符实体，x表示这是十六进制，刚好伪元素的content接受的也是十六进制的Unicode编码， 解决办法: 所以 &amp;#xe601 写成 \e601; .down::after { con...
自学前端第二十五:web字体图标使用
weixin_47592060的博客
03-17 792
web字体图标:本质是字体,伪元素联用的 出现一个白色框即字体失效的检查： ①路径那里是不是fonts文件夹的第一子路径就是全部的文件。 ②/+unicode编码 和 转义编码 有没有弄棍 （一个给content的，一个给html标签上的） ③有没有引入@iconface的ont-family 和 具体引入属性 font-family。（两个 font-family） 一.字体文件格式 不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。 1、TureType(.ttf)格
字体图标的介绍、下载、及使用方法
qq_51135343的博客
04-08 798
字体图标
关于阿里图标库字体在css中的使用（以伪类选择器为例）
qq_40640956的博客
02-10 777
关于阿里图标库字体在css中的使用（以伪类选择器为例） 1. 从阿里图标图库选择想要的字体图标加入购物车并添加进项目 2. 有三种引入模式可选，这里我用在线引入的方式为例（较为方便） 点击生成在线代码 这里放一个演示用案例，link标签中的href放的就是在线链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co
一、阿里矢量图标(字体图标)
RE_SuXianSheng的博客
07-27 325
一、阿里矢量图标(字体图标)
iconfont使用伪类
qq_38402659的博客
03-21 1203
<i class="iconfont">&#xe63f;</i> 将 “" 转换成 “\e63f” // 将 “&#xe63f;" 转换成 "\e63f" <i class="">&#xe63f;</i> .iconfont::before{ content: "\e65f"; font-family:"i...
iconfot图标用于伪类元素
summer鸿的博客
05-21 380
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字体
Bronc的博客
05-08 1225
伪类after、before如何使用阿里的iconfont字体 按照官方文档直接写16进制的字体代码是不能生效的，在content中使用unicode的== & #x33; == 这样的字体编码也是不能生效的。 那问题来了怎么办呢？ 其实解决方法很简单 直接把iconfont类名下面的代码复制给伪类一份 如图 这样十六进制的字体编码就能在伪类中使用啦！！！ 做个笔记 希望也能帮助到需要的你 ...
CSS使用伪元素引入IconFont
W261206的博客
06-12 1896
在日常的开发中，我们一般都是使用类名的方式来引入iconfont，其实我们也可以使用伪元素来引入字体图标，并且更有助于我们html结构的清晰。
关于使用伪类添加icon图标的笔记
m0_63107133的博客
12-09 430
关于使用伪类添加icon图标的笔记
iconfont作用在css伪类中的写法
weixin_30532759的博客
06-07 340
iconfont作用在css伪类中需要注意两点： 　　1.字体声明（font-family: "iconfont";）。 　　2.把字体写成十六进制的Unicode编码。比如："&#xe60a; "写成 content:"\e60a";（&#是开头用以标明这是字符实体，x表示这是十六进制）。 举例： .demo:brfore{ font-family: "iconf...
css3-iconfont伪类选择器的使用
Sivan56的博客
08-15 1916
css3-iconfont伪类选择器的使用 css的iconfont使用有三种方式，第一种方式是Unicode，第二种方式是fontclass，第三种方式是Symbol。在介绍iconfont伪类选择器的使用之前，我们来了解下iconfont的三种css表达方式。关于这三种表示方法在iconfont中都有简介。链接在这iconfont帮助文档 iconfont伪类选择器的使用 斜体样式笔者喜斜体样式欢直接引用例子，所以花里胡哨的表达就算了。 从iconfont上下载字体图标素材 关于素材的相关信息和使用方法
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
m0_55916923的博客
05-28 2843
1.在阿里巴巴矢量图标库中，找到你喜欢的字体图标，选择添加入库（即购物车图标） 2.点击在页面右上方的“购物车” 3.选择“添加到项目”，（没有项目可以创建一个） 4.进入项目之后，选择“Font class”模式，再点击下载至本地5.在你要用的项目目录下新增一个名为iconfont的文件夹，（这里我选择项目中的css文件夹中​​​​​​） 6.解压刚刚下载的压缩包，将iconfont文件放入到项目的css文件中，而后四个文件放入到刚刚新增的iconfont文件中（简单点的话，可以把整个解压..
阿里巴巴矢量图图标怎么添加到after伪元素里面
最新发布
06-02
要将阿里巴巴矢量图图标添加到 `::after` 伪元素中，需要使用 `content` 属性来将图标作为伪元素的内容，并设置其字体、字体大小、颜色和位置等样式。具体步骤如下： 1. 将阿里巴巴矢量图图标下载到本地，并将其引入到页面中。 2. 在 CSS 中定义伪元素 `::after` 并设置其 `content` 属性为图标的 Unicode 编码，例如： ``` .icon::after { content: "\e600"; /* 阿里巴巴矢量图图标的 Unicode 编码 */ font-family: "iconfont"; /* 字体名称，与阿里巴巴矢量图图标的字体名称一致 */ font-size: 16px; /* 字体大小 */ color: #333; /* 颜色 */ position: absolute; /* 位置 */ top: 0; left: 0; } ``` 3. 设置 `font-family` 属性为阿里巴巴矢量图图标的字体名称，例如 `iconfont`。 4. 根据需要设置其他样式，例如字体大小、颜色和位置等。 注意，为了正确显示阿里巴巴矢量图图标，需要下载并引入其字体文件，并在样式中设置正确的字体名称。同时，需要注意不同字体库的 Unicode 编码可能不同，需要根据实际情况来设置 `content` 属性的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值