阿里iconfont官网提供的矢量图标用法介绍
来源:互联网 发布:淘宝麦麦网 编辑:程序博客网 时间:2024/05/21 14:00
阿里iconfunt官网对于图标的调用写的不够详细,许多初用者不会用,下面具体介绍下总结的两种方法:
在线调用方式
1、首先建立新浪微博账号,用微博号登录iconfunt官网;
2、所需要图标加入购物车 ;
3、存储为项目;
4、获取在线链接、生成在线链接;
5、选择fontclass在线css模式;
6、把在线链接粘贴到link标签;
7、用.iconfont如上,在里边随意修改样式;
8、在html中需要的位置写
此处写图标的编号&#…;;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.css"></head><body><i class="iconfont"></i><i class="iconfont icon-rili"></i><i class="iconfont icon-jisuanqi"></i></body></html>
上面的href是我们获取在线链接、生成的在线链接;
当然我们选择第一种时,即:
代码需要这样写:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face { font-family: 'iconfont'; /* project id 441189 */ src: url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.eot'); src: url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.woff') format('woff'), url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.ttf') format('truetype'), url('//at.alicdn.com/t/font_441189_5ls8gbo7pu7q4cxr.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:46px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; color: #eee; /*height: 50px;*/ /*width: 50px;*/ } </style></head><body> <i class="iconfont"></i></body></html>
本人感觉第一种简单点,并推荐使用在线链接,因为下载使用的一个缺点是添加图标的话要重新把所有图标再下载一遍覆盖原来的文件,如果是在线链接只要重新生成一次链接就好了。
- 下载使用
如上图,点击下载至本地,然后解压,将iconfont.css文件,iconfont.eot文件,iconfont.ttf文件,iconfont.woff文件放到你的项目中去就可以使用了,
下面是font-class的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="./iconfont.css"> <style> .icon-my{ color: red; font-size: 50px; } </style></head><body><i class="iconfont icon-my"></i></body></html>
接这是unicode的使用方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:46px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; color: #eee; /*height: 50px;*/ /*width: 50px;*/ } </style></head><body><i class="iconfont"></i></body></html>
有木有感觉麻烦了,好了,下面说一下它们,
首先是unicode写法,它是最原始的写法,所以也比较复杂点,但兼容性特别好,
其次是font-class写法,它是目前使用最多的写法,兼容性良好,并且写法简单
最后symbol写法,它是未来的发展趋势,图片支持svg格式,它支持多色写法,当然目前浏览器渲染svg的性能一般,还不如png。兼容性较差,支持 ie9+,及现代浏览器。
最后需要说明,上面三种均可以通过设置字体样式来控制其大小(font size),颜色(color),突然感觉图片可以想字体一样(padding等)写样式,有木有感觉很简单
由于目前font-class写法已经满足我们的需要,这里不再叙述symbol写法,有兴趣的可以下去自己看看哦。
- 阿里iconfont官网提供的矢量图标用法介绍
- CSS3 iconfont矢量字体图标的使用
- Iconfont怎么用,阿里巴巴矢量图标网
- iconfont矢量图标
- WPF矢量字体图标(iconfont)
- 阿里iconfont图标使用
- 阿里妈妈字体图标(iconfont)使用介绍
- Android:使用矢量图标(iconfont方式)
- 如何使用IconFont?——矢量图标
- 好用的字体图标插件:阿里图标库(iconfont)
- iconfont矢量图库的使用方法
- 图标 iconfont的使用方法
- Iconfont图标的使用
- iconfont 图标字体 用矢量字体实现图标 备忘
- 阿里妈妈矢量图标使用
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
- Iconfont-阿里巴巴矢量图标库的SVG玩法
- iconfont字体图标的使用
- 递归与分治策略-2.9.2线性时间选择(取中位数的中位数基准)(第k小问题)
- 数组重排 hiho一下第167周
- 记录我的Java学习经历(1)
- 【QT】对象模型(对象树)
- HDU
- 阿里iconfont官网提供的矢量图标用法介绍
- 网狐荣耀版棋牌中心服务器显示“服务启动失败”的原因
- 运维之系统服务篇------2.linux扩展应用 、 vim编辑技巧 、 发布网络YUM源 、 源码编译安装
- HTTP协议学习笔记
- Linux常用操作命令(一)
- 高性能服务器开发复习
- 有恒事竟成
- HDU
- Weblogic控制台忘记密码问题解决方法