1:图标有哪些格式,什么是字体图标?
- 图标全部采用字体格式
- 可以使用color,font-size...,改变图标的颜色,大小等样式
2:字体图标实现方式分为哪几类?
- font+html 实现字体图标(又称:Unicode引用)
- font+css 实现字体图标
- 使用 Symbol 方式引用(用于展示彩色图标)
//CSS
@font-face {
font-family: 'iconfont'; /* project id 1164866 */
src: url('//at.alicdn.com/t/font_1164866_eeece602red.eot');
src: url('//at.alicdn.com/t/font_1164866_eeece602red.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1164866_eeece602red.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1164866_eeece602red.woff') format('woff'),
url('//at.alicdn.com/t/font_1164866_eeece602red.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1164866_eeece602red.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size: 16px;
font-style:normal;
/*Better Font Rendering*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 4px;
}
//第一类
<span class="iconfont"></span>
//第二类
<span class="iconfont icon-ic_share"><span>
.icon-ic_share::before { content: "\e61e"; }
3:字体图标与传统图标的区别?
传统图标的处理方式是利用CSS雪碧图;