关于阿里妈妈图标制作(转的,留作参考)
- 第一步:将你看上的图标加入到购物车
- 第二步:存储为项目或者下载到本地
- 第三步:下载修改并调用CSS文件
- 第四步:在网页中使用icon图标字体
网站使用icon字体图标的好处之前也说过,这里就不再赘述了。
今天无意中发现的iconfont这个网站,很有点相见恨晚的感觉,因为就在昨天我还在为icon字体的事儿发愁:网站本来是使用了icon字体图标的,是主题作者清枫自制的几个文件,效果本来挺好的,但有一个bug是我发现在chrome下面很多图标都无法显示,不管我将字体文件怎样重新编辑和生成都不能解决。
在认识到以我现有的水平是搞不定这个问题的之后,只好很不情愿的将字体文件全部替换成Font Awesome字体了。确实是很不情愿,因为Font Awesome仅字体文件就有好几百KB(svg文件达到194KB),这无疑会增加网站访问的压力,虽然我现在用着七牛每个月10G的免费流量,但也不想给网站增加额外的几百KB请求的负担不是。还好今天发现了iconfont,下面就来说说为什么我要将刚修改好的Font Awesome字体抛弃而转用iconfont。
随便说说两者的优缺点
其实主要是说iconfont的优点和Font Awesome的缺点。-_-|||
iconfont的图标库相当巨大,我在写上一篇文章的时候还是51794个,现在刷新之后图标数量已经是52090个了。如果这么大的一个库里面仍然没有你需要的图标的话,你也可以自己动手制作你自己的图标然后使用网站的在线生成工具来生成字体文件,分分钟就可以使用了。
除了拥有巨大的图标库之外,iconfont最值得推荐的原因还在于她使用上的灵活性(实话说,iconfont给我最初的印象是有点像现在各大运营商主打的可自由搭配的积木套餐),因为她完全可以由你自由搭配组合、按需索取。在自定义Walker类给WORDPRESS导航菜单添加ICON字体图标这篇文章中我就提到过。如果你的网站一共只需要用到5个图标,那么你只需要将这5个图标的字体文件和相关的css下载下来就可以用了。如果你想使用iconfont的CDN服务的话,你都不用下载,直接将这几个图标添加到你自己的项目中,然后在你的网站里面引用一个CSS文件就可以了。
再反观Font Awesome,哪怕你只是要用到2个图标,你都必须要把所有文件都下载下来才能使用。而上面也说了,仅SVG就194KB大了,还有其他几个字体文件加起来一共有400+KB,这还是没有算上同样好几十KB的CSS文件。
孰优孰劣是不是很清楚?相信你已经有了自己的选择。
来,下面说说如何使用,其实很简单,但还是理一个步骤给不是很懂的同学。
第一步:将你看上的图标加入到购物车
官方叫法是“暂存架”,购物车只是我的叫法,好像并不准确,因为不需要花钱的啊,但是它用了一个购物车的图标,所以暂且这样称呼吧。
这里你可以在iconfont的图标库里面寻找你要的图标,但是我不建议你这样做,因为默认给出的几个官方图标库里面的图标是不全的。正确的做法是在导航栏右侧的输入框中输入关键词来搜索图标,这样就会将网友制作的图标都搜出来。(我一开始就是在图标库中找微信、twitter和QQ空间的图标怎么也找不到,后来试着在上面搜索了一下,出来大把的,才知道官方库里面是没有收录这些图标的。。。)
第二步:存储为项目或者下载到本地
就像上面图片中的那样,添加到购物车之后就可以存为项目或下载到本地,这里看你的需求了。反正我是想使用阿里的CDN,所以直接存为项目了。存储为项目的时候你可以选择存为新项目还是添加到已有的项目里面,确定之后会跳转到项目详情页。
第三步:下载修改并调用CSS文件
在项目详情页里面你还是可以选择是下载文件到本地使用还是使用阿里的CDN,当然选择CDN了(也就是页面中的获取在线链接)。这里建议使用Font Class,因为如果你选择Unicode的话CSS中图标的编码都要自己写,这个有点麻烦啊,不符合我这种懒鬼的风格,所以如果你也是懒鬼一枚请将下图中右上角的滑块滑到右侧。
然后鼠标移到左侧的获取在线链接这里就能看到生成的CSS文件了,你现在有两个选择:一是直接调用这个文件,在网站的HTML中修改添加图标的元素的类为"iconfont icon-xxx"的;第二个选择是将这个文件下载下来,然后做一些修改之后传到服务器本地调用,然后在网站的HTML中修改添加图标的元素的类为"icon-xxx"。我选择的是第二种,大家随意。
选择第二种的话需要对CSS做一点小的修改,将选择器“.iconfont”改为“[class*=icon-],[class^=icon-]”:
- [class*="icon-"],[class^="icon-"]{
- font-family:"iconfont"!important;
- font-size:16px;
- font-style:normal;
- -webkit-font-smoothing:
- antialiased;
- -webkit-text-stroke-width:0.2px;
- -moz-osx-font-smoothing:grayscale;}
然后引用CSS文件就OK了。
第四步:在网页中使用icon图标字体
CSS调用之后就可以在HTML中给元素添加CSS类来显示图标了,看下面这张图,比如我要调用图片中的小火箭这个图标,那我就要将我的HTML修改为
- <i class="icon-xiaohuojian"></i>
这样既可。
wordpress导航栏怎么使用icon图标字体可以看看这篇文章。
转载于:https://www.cnblogs.com/luomir/p/5088599.html
关于阿里妈妈图标制作(转的,留作参考)相关推荐
- 【涨薪规律,四个词:英语、外企、进修、跳槽。】---留作参考
==========留作参考:[最后都发现一个规律,四个词:英语.外企.进修.跳槽.] ========== 虽是旧帖,我觉得有意义再翻出来和您回味.不是因为他们在今天有多么高的薪资,而是因为他们当年 ...
- mysql截取字符串并更新_【转载,留作参考】mysql 截取字符串以及mysql update select...
因为想要把表中的一个字段的一部分取出来,另放一个新的字段里面,所以想到了mysql的字符串截取功能. 实例如下: select params, substring_index(params, '=', ...
- Flutter中 解决自定义阿里妈妈图标一直显示不出来的问题
前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂,风趣幽默",感觉非常有意思,忍不住分享一下给大家.
- 关于阿里妈妈字体图标
什么是icon fonts 这个实在不知道怎么描述,我的理解就是利用字体工具把Web上平时使用的图标(icons)转换成icon fonts;它可以借助CSS中的@font-face嵌入网页中,用于显 ...
- 阿里妈妈矢量图标使用
1.登陆 http://www.iconfont.cn/ 阿里妈妈矢量图标库 2.登陆,可以使用GitHub账号或者其他账号登陆 3.选择将要使用的主题图标,或者在搜索栏里面搜索需要的图标 4.将需要 ...
- 阿里妈妈免费网站Flash动画广告牌制作
阿里妈妈广告牌生成器提供免费网站Flash动画广告牌制作服务,类似于本站曾介绍过一个提供免费广告条Banner制作的网站我拉网. 阿里妈妈的广告牌制作服务是免费的,可设定多种广告尺寸,并提供了一些很不 ...
- vue引入阿里妈妈的图标
首先你需要一个团队,然后加入进去,这时候你就可以找到自己项目需要用的的图标,然后加入购物车,直接点击下载代码,然后解压, 然后把这个文件放到你的项目里边,我是vue,所以放到了pubulc下, jso ...
- jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效
原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm
- 来一个阿里妈妈字体图标的简单说明书吧
随着前端技术的飞速发展,涌现了很多新的技术.而且我们在用户体验的路上也是一直在孜孜不倦的探索着.为了提高页面的加载速度,渲染速度.提高用户的体验做出了很多努力. 可是最近发现很多前端开发者还是不会是用 ...
最新文章
- Git GitLab 使用及规范
- 10种常用排序算法实现
- 唱歌如何保持高位置_歌唱中如何找到声音的高位置,内容详解
- 12行代码AC-Leecode 598. 范围求和 II——Leecode每日一题系列
- Packt发行的$ 5 Java编程书籍:精通Java 9,Java 9 High Performance
- P01:01背包问题(转)
- OMS开发随笔之开发和部署要点
- 图解 Java 中的数据结构及原理,傻瓜也能看懂!
- 旋转链表 Java,leetcode 旋转链表 Java
- 由spin_lock_bh想到的一些事
- python pptx表格里的字体怎么调整_在python pptx中更改序列填充颜色
- Azure安全系列(2)-体验Azure Security Center(安全中心)
- html js制作地图,前端使用D3.js制作地图
- 《ANSYS Workbench有限元分析实例详解(静力学)》——2.5 Windows界面相应操作
- Linux db2 54048,db2中SQLCODE=-1585,SQLSTATE=54048报错问题的解决
- python个人简历参考,python爬虫-1w+套个人简历模板爬取
- 程序员软技能:职场、学习、生活,代码之外生存之南
- xilinx zynq 7010/7020 中断/中断向量/GIC向量/GPIO中断
- SDN有哪些优势呢?
- 有活着的感觉就有未来————《时生》读后感