阿里巴巴iconfont的简单使用
2016-10-16 22:11
417 查看
今天写作业的时候,遇到了这样一个问题:
很明显,需要用到四个图标。其实上一次整理过一篇关于奥森图标使用方法的博客,今天也第一个想到去奥森图标的官网去找找看。可是奥森图标网站没有检索功能,我就那样一页一页地找啊,差点瞅瞎了我的超级无敌卡姿兰大眼睛也没找到(也许是我不会搜索,反正我是没找见在哪搜)。。。后来就又想到了老师之前介绍过的阿里巴巴iconfont,现将使用方法总结如下:
1.阿里巴巴iconfont
2.用微博账号登陆。
3.在搜索框内输入你要找的图标,在想要选择的图片下点击购物车图标保存
4.选好所有要找的图片之后,点击右上角的暂存架,把里面所有的目录都存储为新项目:
5.完成上一步之后,就会自动跳转到项目管理界面。
可以看到有两种方法可以将图标添加到自己的页面当中,但是通过第一种“获取在线链接”的方法我总是实现不出来,也不知道哪里出了问题。在这里留一个待解决的问题吧,接下来具体说第二种方法——“下载至本地”:
6.点击下载到本地。会发现有如下文件夹:
7.打开文件夹会发现有这些类型的文件:
a.打开demo.html会发现你需要的图标及它的Unicode编码。
b.将iconfont.css文件里的内容复制粘贴到你当前项目的css内容里。
c.将剩下的四个文件直接复制在你项目所在文件夹里
8.在html文件中需要添加图标的地方使用iconfont类名,如下:
注:i标签里面写上你想用的图标下面的Unicode值
9.可以通过控制iconfont类的属性改变图标的样式,比如:
例如:
这样,就可以在页面中对iconfont图标进行使用和修改了。
很明显,需要用到四个图标。其实上一次整理过一篇关于奥森图标使用方法的博客,今天也第一个想到去奥森图标的官网去找找看。可是奥森图标网站没有检索功能,我就那样一页一页地找啊,差点瞅瞎了我的超级无敌卡姿兰大眼睛也没找到(也许是我不会搜索,反正我是没找见在哪搜)。。。后来就又想到了老师之前介绍过的阿里巴巴iconfont,现将使用方法总结如下:
1.阿里巴巴iconfont
2.用微博账号登陆。
3.在搜索框内输入你要找的图标,在想要选择的图片下点击购物车图标保存
4.选好所有要找的图片之后,点击右上角的暂存架,把里面所有的目录都存储为新项目:
5.完成上一步之后,就会自动跳转到项目管理界面。
可以看到有两种方法可以将图标添加到自己的页面当中,但是通过第一种“获取在线链接”的方法我总是实现不出来,也不知道哪里出了问题。在这里留一个待解决的问题吧,接下来具体说第二种方法——“下载至本地”:
6.点击下载到本地。会发现有如下文件夹:
7.打开文件夹会发现有这些类型的文件:
a.打开demo.html会发现你需要的图标及它的Unicode编码。
b.将iconfont.css文件里的内容复制粘贴到你当前项目的css内容里。
c.将剩下的四个文件直接复制在你项目所在文件夹里
8.在html文件中需要添加图标的地方使用iconfont类名,如下:
注:i标签里面写上你想用的图标下面的Unicode值
9.可以通过控制iconfont类的属性改变图标的样式,比如:
例如:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{width:500px; height:200px; background-color:rgba(232,234,34,0.5); padding:20px;} @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1476610392'); /* IE9*/ src: url('iconfont.eot?t=1476610392#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff?t=1476610392') format('woff'), /* chrome, firefox */ url('iconfont.ttf?t=1476610392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1476610392#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { 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; } .icon-fenlei:before { content: "\e600"; } .icon-gouwuche:before { content: "\e601"; } .icon-wode:before { content: "\e602"; } .icon-shouye-copy:before { content: "\e603"; } </style> </head> <body> <div> <i class="iconfont"></i> </div> </body> </html>
这样,就可以在页面中对iconfont图标进行使用和修改了。
相关文章推荐
- 阿里巴巴iconfont使用方式
- iconfont字体图标的使用方法--超简单! 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以
- Android 开发中 阿里巴巴矢量图标库 IconFont的使用详解
- 阿里巴巴iconfont的正确使用方式
- 阿里巴巴iconfont怎么是正确的使用方式?
- WPF使用矢量字体图标(阿里巴巴iconfont)
- 20180122-阿里巴巴iconfont使用方式
- 使用阿里巴巴图标库生成iconfont字体图标
- 阿里巴巴iconfont使用方式
- 阿里巴巴iconfont的正确使用方式
- Ionic使用Iconfont-阿里巴巴矢量图标库
- 做小图标还用sprite图?你out了!史上最简单易懂iconfont使用教程
- 阿里巴巴iconfont使用方式
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
- 字体图标使用方法——以Iconfont为例
- iOS iconfont字体图标使用
- 这段时间一直在做iconfont.cn这个平台。积累了些东西,记录下。 1.什么是iconfont? iconfont不是什么新技术了。 我们知道web网页能使用的字体一直很少,很多时候设计师用ps
- [Wondgirl]iOS-Icon font的制做及使用
- webpack中使用iconfont字体图标的方法
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)