阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配
前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于是我们经过交流之后决定使用阿里巴巴适量图标库,这是我们第一次使用,也顺便把经验分享给大家,希望可以对一些前端有所帮助。
首先我们需要找到这个网站https://www.iconfont.cn/ 打开之后看到的首页大概是这个样子:
里面有搜索框,首先先是UI来找图标设计,里面图标大都是免费的,而且样式多种多样,打个比方我们搜索一个首页的图标。
在这里我们找到需要的合适的图标,将鼠标放上去的时候会出现三个按钮,就像这样
之后作为UI可以下载直接使用,当然为了团队,也需要收藏,加入项目,这里可以自己新建一个项目,用来存放自己设计时用到的图标,之后再拉前端进入这个项目。
接下来就可以看到UI设计时使用的所有图标了
使用它的方法也非常简单,我们首先需要引入上面的就js,这个js是阿里巴巴专门为你的项目生成的,每一个项目的地址都不一样,而且包括这个项目里图标变动也会影响地址需要更新,所以一旦确定使用之后尽量避免更改,之后我们在复制一段css放到页面上
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;} </style>
之后我们就可以正常使用icon了,使用方法可以调用
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use> </svg>
当然不只是这一种方法,个人觉得这种方法更好用,详细说明请参考网站:https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
转载于:https://www.cnblogs.com/qihongbao/p/10470161.html
阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配相关推荐
- 【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
- 阿里巴巴矢量图标库-iconfont使用方式
阿里巴巴矢量图标库-iconfont使用方式 在项目开发的过程中,我们经常会使用到图标进行页面的修饰.如果使用图片,往往会遇到失真的情况,而且图片数量很多的话,页面加载也会变得很慢.所以,我们可以使用 ...
- 阿里巴巴矢量图标库iconfont的素材使用
**阿里巴巴矢量图标库iconfont的素材使用**写于2020年8月5日 苏州宜家餐厅 昨天首次写的vue脚手架搭建方法,浏览量超过了我的想象,我的分享对于新手来说,应该是很有帮助的,因为我就是个v ...
- 阿里巴巴矢量图标库iconfont的使用
场景 工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
- 矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
- 阿里巴巴矢量图标库iconfont使用教程
打开https://www.iconfont.cn,直接搜索图标名称即可:
- 简单介绍一下阿里巴巴矢量图标库的使用
相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完全免费的,可以在线使用也可以下载到本地使用,而且图标是作为字体插入,不仅可以改变颜色大小,而且在布局方面也非常方便. ...
- vue+element-ui项目引入第三方图标库:阿里巴巴矢量图标库(问题:小方框)
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
- Element引入Iconfont(阿里巴巴矢量图标库)第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
- 使用iconfont阿里巴巴矢量图标库(最方便的使用方法)
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库 看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
最新文章
- mysql安装图解 mysql图文安装教程(详细说明)
- 提取LSA密码lsadump
- QQ提示应用程序并行配置不正确,绿色版QQ不能运行解决方法
- 还觉得linux命令难吗,看这篇2w多字的linux命令详解,通俗易懂
- MATLAB使用教程(三)——在文件中编程
- jQuery倒计时(仿团购)
- python 核心编程 第一部分
- 电脑解锁后黑屏有鼠标_电脑开机黑屏只有鼠标如何解决
- 以太坊 solidity return 返回值写法 3种格式
- 20145326蔡馨熠《信息安全系统设计》第7周学习总结
- linux中文件大小的分配,Linux创造固定的文件大小-预分配磁盘空间
- 【Swoole系列5.1】毫秒定时器
- linux软件版本管理命令update-alternatives使用详解
- 智慧城市顶层设计与不确定性
- 电脑怎么设置微信定位服务器,电脑版微信,一个很简单的客户端,许多功能不支持...
- 一个小想法--理解指针的机制与汇编中的寄存器间接寻址
- 快速下载 Android framework 源码
- pyecharts对于经纬度_pyecharts绘制geo地图
- Laravel Excel导出xls乱码
- Pandas 统计分析基础 笔记5 _任务4.5 创建透视表与交叉表
热门文章
- linux 运行java工程师_java工程师linux命令,这篇文章就够了
- eclipse配置python开发环境_Eclipse中配置python开发环境详解
- 新浪下拉菜单(js原生版本)
- window下的免安装redis
- 联想用u盘重装系统步骤_保姆级重装系统教程在此
- 操作系统—内存的连续分配管理方式
- 越权操作(文件读取漏洞)
- Git和SourcesTree的安装
- Unity3D之NGUI基础7:UI动态加载
- docker安装常用组件(mysql,redis,postgres,rancher,Portainer,蝉道,JIRA,sonarqube,Confluence,pgadmin4,harbor)