IconFont 图标
-
微信
-
书法
-
密码
-
删除
-
qq
-
高考
-
剪刀
-
时间
-
展开
-
小提琴
-
消息
-
正确
-
蛋糕西点
-
我的
-
运动
-
密码
-
外语
-
日本语
-
推荐
-
支付宝
-
坐标-0
-
棋牌游戏
-
坡度尺
-
证
-
声乐合唱类
-
致优英语图
-
课程
-
箭头左
-
学校
-
艺术2
-
报考新规
-
钱包
-
博士帽
-
头像
-
健康指导
-
推荐
-
叉
-
帐篷
-
首页
-
奶瓶
-
其它
-
舞蹈
-
日历
-
ic_函数_24px
-
勾选
-
补课次数
-
绘画
-
手机
-
运动-武术
-
书
-
学校
-
日历
-
留学考试
-
韩国
-
支付
-
媒体档案
-
箭头右箭头
-
外卖服务-使用方便
-
分享
-
iconfont-5
-
chevron-thin-down
-
chevron-thin-up
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
unicode使用步骤如下:
第一步:拷贝项目下面生成的font-face
@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的样式
.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;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。