阿里巴巴字体库里的图标怎么画的?教你几个步骤建立自己的图标字体库

图标字体 在前端开发中,图标是最常见的用于美化页面的元素。
阿里巴巴字体库里的图标怎么画的?教你几个步骤建立自己的图标字体库

早前还需由UI人员做成各种小图片然后放到页面中,随着移动端应用的普及,为了更好的缩放效果,节省流量,提高运行效率,现在都已经改成了图标字体的技术,而很少需要用图片来完成了。 图标字体,就是一种特殊的字体,只不过显示出来不是字而是一个图形。 最常见的一种就是windows自带的特殊字符,比如我们可以直接写出“○●◎→←↑↓”这样的简单图形,由于无需调用图片,能像写字一样写出来,性能优异而且使用方便。 windows自带的特殊字符是很有限的,所以图标字体的技术逐渐发展起来,工程师们自己造图形文字,写成字库,现在很多前端UI框架,像流行的bootstrap,ElementUI等,几乎都内置了大量的图标字体。 为什么要做自己专属的图标字库 既然框架里都集成了图标字体,那我们还去做自己的图标字库有什么意义呢? 当然是有意义的,首先,并非每个项目都会使用到那些框架。其次,即使用了这些框架,他们集成的图标也是有限的,并不一定能满足使用需求。再次,即使只使用少量的几个图标,也需要带上整个框架的庞大图标字库,那不是很低效吗? 所以,制作自己的精选图标库,或者为自己的某个项目制作专属的图标库,就显得非常有必要了,也方便以后重复使用或移植。 今天,就教给大家如何只用3个步骤制作自己的图标字体库 第一步,打开阿里图标库 网址 https://www.iconfont.cn
阿里巴巴字体库里的图标怎么画的?教你几个步骤建立自己的图标字体库

这是阿里巴巴开源的图标库,全部免费使用,而且还是矢量图标哦!赶紧注册登录吧! 第二步,选择图标加入购物车
阿里巴巴字体库里的图标怎么画的?教你几个步骤建立自己的图标字体库

阿里巴巴号称里面已经有585万个免费图标了,是的,你没有看错,总有一款适合你!点击加入购物车! 第3步,下载图标 进入购物车,直接下载,当然这个是免费的哦! 图标字体的使用 首先把字库文件全部放到比如font目录下
阿里巴巴字体库里的图标怎么画的?教你几个步骤建立自己的图标字体库

然后在页面里引入
<link rel="stylesheet" href="./font/iconfont.css">
现在就可以使用了。在下载的压缩包里有个demo_index.html,里面有图标列表,还有详细的说明,可以用3种方式使用,区别在于易读性和浏览器兼容性。文档很长,要是你没耐心读,那么就用我教你的这个法子好了,先看图标列表,比如可能是这样:
阿里巴巴字体库里的图标怎么画的?教你几个步骤建立自己的图标字体库

如果我们需要用户头像这个,对应的是 icon-user,那就这样写:
<span class="iconfont icon-user"></span>
于是span这个地方就会变成人像图标了,是不是很好用呢? 除了使用现成的图标,也可以自己创作或者编辑修改,网站上也提供了丰富的工具。

声明:本文由网站用户竹子发表,超梦电商平台仅提供信息存储服务,版权归原作者所有。若发现本站文章存在版权问题,如发现文章、图片等侵权行为,请联系我们删除。

(0)
上一篇 2023年3月12日 18:52:20
下一篇 2023年3月12日 19:02:23

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注