如何在伪元素：：after ：：before内使用阿里字体图标

最新推荐文章于 2023-12-07 16:16:53 发布
最新推荐文章于 2023-12-07 16:16:53 发布
阅读量927 收藏 10
点赞数 6
分类专栏： 部分知识点心得 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61973028/article/details/123501938
版权

1、从如何拿到字体图标包开始（寻找心意的字体图标开始介绍）

 解压压缩包在你想要的html页的同级（不在同级也行，自己导入的时候把路径写对）在文件夹里找到demo_index的页面 点开，

找到你想要的字体图标复制&#x之后的数字和字母

“\+e65e"放入content里。

 

 

 

可爱迷人的反派角色&
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
web前端入门到实战：css伪元素::after和::before，及图标字体的使用
软件开发-前端开发-IT
09-20 3275
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 The CSS ::before(::after) pseudo-element matches a ...
使用:after制作图标
火焰
08-04 1595
转自：https://www.cnblogs.com/starof/p/4459991.html 首先看效果图： 代码如下： <!doctype html> <html> <head> <title>伪类标签使用</title> </head> <style type="text/css"&
伪类after before如何使用阿里的iconfont字体
szy1000的专栏
10-31 1万+
之前在做一个蛋糕项目的时候，设计给了我一个这样的图片（tips:[ “ \e60d”为蛋糕的小图标 ]） 当中的蛋糕图标，我的第一反应就是用before去做。然后把iconfont图标的十六进制的编码放到content里面去。 正所谓，理想很丰满，但现实很骨感！失败了！ 于是，我就翻起之前的文章是相关content字符编码的，戳我查看。 于是我换了一个content的值。尽然
css 元素前后添加图标（::before 和 ::after 的妙用）
最新发布
朝阳39的博客
12-07 1373
【代码】css 元素前后添加图标（::before 和 ::after 的妙用）
web前端知识点小结 （一）
xgq330409675的博客
06-19 2136
html标签含义 <!–…–>:定义注释 <!DOCTYPE> ：定义文档类型 <html>:html文档的总标签 <head
CSS3中伪元素::before和::after的用法示例
09-24
before 和 after其实就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，这篇文章主要给大家介绍了关于CSS3中伪元素::before和::after的用法...
CSS伪元素：after：before的特殊用法demo
06-19
在这个特定的示例中，我们关注的是CSS中的两个重要概念：伪元素`:after`和`:before`。这两个伪元素允许我们在不添加额外HTML标记的情况下，向元素的内容中插入内容。 `:after`和`:before`伪元素在CSS3中被引入，...
CSS伪元素 :before, :after, box-shadow应用
09-25
本文将重点介绍CSS中的伪元素`:before`和`:after`以及`box-shadow`属性的应用，这三个特性可以帮助我们创造出富有创意和视觉吸引力的设计。 首先，CSS伪元素`:before`和`:after`允许我们在元素内容的前面或后面添加...
CSS伪类:before在元素之前 :after 在元素之后实例讲解
09-25
本教程简单的介绍一下关于CSS伪类:before, :after详解:before 伪元素在元素之前添加内容;after 伪元素在元素之后添加内容;有需要了解的朋友可以参考一下
CSS中的before和:after伪元素使用详解
09-25
在实际使用中，`:before` 和 `:after` 伪元素经常与CSS的其他属性结合使用，比如`content`、`display`、`position`、`background-image`等，来实现如浮动提示、分隔线、装饰性图标等多种效果。例如，它们可以用于在...
css中使用:before和:after伪元素在元素后面添加图标或者图片
热门推荐
u012381782的博客
11-18 2万+
如题： 1.
伪元素使用——字体图标（以阿里巴巴矢量图标库为例）
m0_55916923的博客
05-28 2657
1.在阿里巴巴矢量图标库中，找到你喜欢的字体图标，选择添加入库（即购物车图标） 2.点击在页面右上方的“购物车” 3.选择“添加到项目”，（没有项目可以创建一个） 4.进入项目之后，选择“Font class”模式，再点击下载至本地5.在你要用的项目目录下新增一个名为iconfont的文件夹，（这里我选择项目中的css文件夹中​​​​​​） 6.解压刚刚下载的压缩包，将iconfont文件放入到项目的css文件中，而后四个文件放入到刚刚新增的iconfont文件中（简单点的话，可以把整个解压..
:before/:after里iconfont的使用方法
u014608930的博客
12-30 9784
:before/:after是伪元素，fontawesome 是在伪元素的content加入不同的Unicode 来渲染不同的图标的 可以放在content 里啊，直接放在 html里的那是字符实体编码，比如 其中&#是开头用以标明这是字符实体，x表示这是十六进制，而CSS的content接受的也是16进制的Unicode编码，所以可以直接写 content: "\e7b
樱花旋转
renjingzhaozhao的博客
04-30 7775
css /*樱花旋转*/ @font-face {font-family: "iconfont"; src: url('//at.alicdn.com/t/font_679578_qyt5qzzavdo39pb9.eot?t=1527145839653'); /* IE9*/ src: url('//at.alicdn.com/t/font_679578_qyt5qzzavd...
添加图标:before 和 :after css中用法
weixin_30617737的博客
03-15 1464
#sTitle:after{ position: absolute; top: 2px; font-family: "FontAwesome"; content: "\f0d7"; padding-left: 10px;} 附上图标类对应的字符编码表： NAMECODENAMECODE .fa-glass \f000 .fa-github...
伪类选择器添加阿里图标 iconfont.css 的方法
liujiawang1219的博客
08-11 1267
阿里图标库下载源码得到 iconfont.css @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1591689630095'); /* IE9 */ src: url('iconfont.eot?t=1591689630095#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf
利用伪元素:before和:after插入图标
Dumplingsoul的博客
05-24 2万+
如果你想在网页的某些文字前加图标或者想改变li元素默认的图标，你会如何做？常见的做法是在文字前再加一个标签用于存放图标，引入一个图标库（比如Iconfont-阿里巴巴矢量图标库）或者一张图标图片。本文价绍一种不用再额外添加html标签，存粹利用css就能插入或者自作图标的方式。先了解伪元素：before和：after定义与语法定义：在被选元素的内容前面（before）和后面（after）插入内容。...
伪类元素before after设置img图标大小
enhenglhm的博客
03-03 2230
伪类元素before / after添加图标的时候，一般突图标不多则直接在阿里云矢量图库下载图片，然后设置即可，但是发现大小不可控制，于是通过变成背景图片的办法 参考css如下： p::before { content: ""; display: inline-block; width: 20px; height: 20px; background: url("./gg.png")
css文字图标(阿里图标)使用及引入方式
weixin_71250679的博客
06-12 2088
css文字图标(阿里图标)几种使用及引入方式
使用css实现下拉列表，且使用字体图标
05-29
可以使用CSS中的伪元素:before或:after来实现下拉列表中的字体图标，并且可以通过CSS样式控制它的位置和样式。 下面是一个示例代码，其中使用了FontAwesome字体图标库中的下拉箭头图标： HTML代码： ``` <div class="select-wrapper"> <select> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </div> ``` CSS代码： ``` .select-wrapper { position: relative; width: 200px; } select { width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #f2f2f2; font-size: 16px; color: #333; appearance: none; /* 隐藏默认下拉列表样式 */ } select:focus { outline: none; } /* 使用FontAwesome字体图标库中的下拉箭头图标 */ .select-wrapper select:before { content: "\f107"; font-family: "FontAwesome"; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; color: #333; } /* 鼠标悬停时改变下拉箭头图标颜色 */ .select-wrapper:hover select:before { color: #666; } ``` 在上面的代码中，我们首先将包含下拉列表的div设置为相对定位，然后隐藏默认的下拉列表样式，并且使用appearance:none;属性来隐藏默认的下拉箭头图标。 接下来，我们使用伪元素:before来添加下拉箭头图标，并且通过CSS样式来控制它的位置和样式，例如设置它的位置为父元素的右侧，颜色为#333等。同时，我们还可以通过:hover伪类来改变下拉箭头图标的颜色，以实现鼠标悬停时的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值