主要特性
使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:
- 自由的变化大小
- 自由的修改颜色
- 添加阴影效果
- IE6也可以支持
- 支持图片图标的其它属性,例如,透明度和旋转等等
- 可以添加text-stroke和background-clip:text等属性,只要浏览器支持
如何使用?
文字修饰:
- <font color="Black"> <h3>
- <span aria-hidden=”true” data-icon=”⇝”></span>
- Stats
- </h3>
- [data-icon]:before {
- font-family: icons; /* BYO icon font, mapped smartly */
- content: attr(data-icon);
- speak: none; /* Not to be trusted, but hey. */
- }</font>
单独图标:
- <font color="Black"> <a href=”#”>
- <span aria-hidden=”true” data-icon=”▨”></span>
- <span>RSS</span>
- </a>
- /* Same CSS as above, plus */
- .icon-alone {
- display: inline-block; /* Chrome 19 was weird with clickability without this */
- }
- .screen-reader-text { /* Reusable, toolbox kind of class */
- position: absolute;
- top: -9999px;
- left: -9999px;
- }</font>
如果大家需要创建自己的iconfont,推荐使用iconmoon,使用它你可以通过上传SVG或者字体来生成你需要的icon字体,本文在线演示使用iconmoon生成。
步骤1:选择他们提供的或者上传自己的
步骤2:下载下来
然后我们解压下看看文件
index.html就是样例,font里就是字体
好了这样你就可以使用图标字体了,可以根据自己的需要修改index文件。
本站演示效果:在线手册
来源:PHP小镇