css自制icon图标（最简单的一种方式）

最新推荐文章于 2024-08-16 09:00:00 发布
最新推荐文章于 2024-08-16 09:00:00 发布
阅读量2.3k 收藏 12
点赞数 12
分类专栏： #前端组件库 文章标签： css 前端 visual studio code vue.js html elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu__yuan/article/details/135010127
版权

前言

        近期在系统开发过程中，想在文件上传框下方增加一个公告类的图标，使用的是 element-ui组件库，去官网查了一下发现并没有 el-icon-notice 类型的公告图标（但是在 vant 与 vux 等移动端组件库中是有的），于是想着使用 css 来实现自制 icon 图标，其实自定义 icon 图标方式有好几种，但是笔者只使用了一种较为简单的方式，亲测有效，现分享给同行开发者们。

官网icon总览（未找到公告icon）​​
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【金融科技蚂蚁】
关注
专栏目录
订阅专栏
iconoo是一个纯CSS的图标库基于icono改造而成
08-10
iconoo是一个纯CSS的图标库，基于 icono 改造而成，增加了整体缩放功能（线宽不变）和webpack引入方式。
推荐开源项目：CSSICON - 纯CSS代码实现的图标库
gitblog_00082的博客
05-11 397
推荐开源项目：CSSICON - 纯CSS代码实现的图标库 cssiconicon set made with pure css code, no dependencies, "grab and go" icons项目地址:https://gitcode.com/gh_mirrors/cs/cssicon 1、项目介绍 在网页设计和开发中，图标扮演着至关重要的角色，它们使界面更具视觉吸引力并帮助...
前端必知必会-CSS图标icon
最新发布
qq_24018193的博客
08-16 397
本文介绍了CSS图标icon的使用，如有问题欢迎私信和评论。
CSS - icon图标(icon font)
anchenhe9360的博客
05-12 1227
1. 概念 这个小红点是图标，图标在CSS中实际上是字体。 2. 为什么出现本质是字体的图标? 2.1 图片增加了总文件的大小。 2.2 图片增加了额外的http请求，大大降低网页的性能。 2.3 图片不能很多地进行缩放，因为图片放大和缩小会失真。 3. 字体图标的优点，结合图片和文字的特性 3.1 可以做出跟图片一样可以做的事情,改变透明度、旋转度等等 3.2 本质是文字...
css--icon图标
Aciel_的博客
06-22 675
今天来学习引入icon图标,我们在浏览网页的时候可以看到网页的导航图标,方便我们一眼认出我们正在浏览的网页,那么这个图标是如何做到的呢?我们可以在浏览器中进入某个官网,直接在网址后加上 /favicon.ico ,点击进入即可获取logo图标,右键另存为即可获得logo图标了。1.首先做准备工作,先在某个官网中下载一张logo图片,用来作为我们制作的网页图标,将其命名为XXX.ico的形式。3.在.html文件中运行代码,你就可以得到一个拥有logo图标的网站了。如果你学到了的话,也赶快去试试吧!
用CSS来制作图标
weixin_34268610的博客
01-23 284
想知道如何利用CSS来制作图标吗？并且只使用一个标签的情况下，不能使用伪元素哦！ 在利用CSS制作图标时，经常用到border边框，所以，先看看边框的相关知识。 1.藏在border中的不能说的秘密 <style> .box{ width:100px; height:100px; border-top:10px solid red...
CSS绘制Icon
weixin_42549581的博客
03-26 405
/*实心*/ .icon{ display: inline-block; width:0px; height:0px; overflow:hidden; vertical-align: middle; border-width:10px; border-color:transparent transparent transparent b...
【CSS】用CSS绘制图标（图标大全）
热门推荐
码婆Doph
11-25 2万+
转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！ 技艺不精，若有纰漏，还请不吝指出。 暂停按钮 <style> .box{ width: 50px; height: 50px; background-color: white; border: 1px solid blac
一套非常实用的html+css实现常用的ICON图标
11-13
一套非常实用的html+css实现常用的ICON图标，使用非常简单： 第一种、 data-icon=":"> 第二种、<i class="icon_refresh"></i>
Ext JS 1713个icon图标
07-18
由于最近在研究Extjs4.1.1，没想到Extjs没有自带的iconCls所使用的图标样式css，就是用那个写那个的，纠结了半天，网上也找了好久，还是自己写了个批量处理程序，集合了1713个png小图标，都是Extjs原生态的，直接...
【奇技淫巧】用CSS修改嵌入的svg icon图标图片的颜色
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-12 2016
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/search/index?searchType=icon&q=csdn&page=1&fromCollection=-1&fills=&tag=点上面的链接进去下载这个csdn.svg 效果如图：.........
【Layui】layui 自定义icon 图标
德仔
10-14 2986
Layui 提供的图标较少，通常不能满足个性化的需求，阿里,font-awesome等提供免费的图库，那么如何扩展呢？
使用CSS生成图标
weixin_33769125的博客
09-14 696
有一次笔者在参加前端面试的过程中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，引用这个文件之后，就可以通过给元素添加类名来给元素添加相应的图标，并且这个图标还可以改变颜色和大小。那么它是怎么实现的呢？大家首先想到的最通用的添加图标的方...
自定义CSS的Icon图标
小人物的点点滴滴
12-22 946
http://note.youdao.com/noteshare?id=a957d57709fe80c5f381b0a947254b44 这些是下载来的文件 放到项目下面 在组件应用，加上后面这两段CSS代码 @font-face { font-family: 'iconfont'; src: url(FontIcon/font_pause/iconfont.eot); ...
Icon的制作
老哥二娃
03-11 1468
字体文件生成网站 1.国外 https://www.icomoon.io/ 2.国内 http://www.iconfont.cn/ 生成字体文件(以icomoon为例) 1.进入官网–&gt;选择IcoMoonApp–&gt;点击进入 2选择需要制作的iocn–&gt;点击左下角的制作字体文件 3.自定义class的名称 4.点击右下角的Download下载字...
icon图标制作与使用
每一次跌倒，都是为了下一次站得更稳。
04-05 1298
icon图标不是图片
html和css制作小图标,前端不求人系列 自己制作一个Icon字体图标
weixin_29532927的博客
06-03 669
这里将告诉您前端不求人系列 自己制作一个Icon字体图标,具体操作方法:图片格式的icon图标有很多缺点，例如放大时会失真，图片体积大，不支持变色等，这篇文章会手把手指导你如何将一个png、jpg等图片格式的icon转换成字体文件的图标用下面的png图片做示例(一)首先我们需要找到一个png图片转svg矢量图的网站，百度上可以找到很多这种网站，我这里是用的autotracer：https://ww...
icon图标制作
qq_37607451的博客
03-02 613
&lt;!--在网址后面添加/favicon.ico即可查询--&gt; &lt;!--https://www.baidu.com/favicon.ico--&gt; &lt;!--ico图片要放在根目录--&gt; &lt;!--&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;
CSS3图标字体实战：为什么及如何制作Icon Font
CSS3 icon font由于其文件小、易于编辑维护、跨浏览器兼容性好等特点，成为了现代网页设计中流行的一种图标解决方案。通过使用字体编辑工具如FontLab，可以将矢量图稿转换为字体，实现图标与文本的一体化处理。" 在...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【金融科技蚂蚁】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值