2016-10-18  1,397 评论

自定义字体图标

做过网站都知道熟悉使用字体图标会让网站显示的更美,而且字体图标是个矢量图,可以随意放大和缩小,这是图片所不能给予的,而且还不怎么占用空间。

常用的字体图标库有很多,比如wordpress自带的Dashicons字体、为 Bootstrap 而创造的Font Awesome字体、还有阿里的iconfont字体,这些字体都是开源的免费使用!

首先说明下字体图标说到底其实就是一种字体,然后用css调用其中的字体,你可以用css控制这个字体的大小、颜色。

dashicons是wordpress自带的,但是可能字体比较少满足不了我们需求,

fontawesome是老外制作的,有些字体不是我们所需要的,但是我们需要的有些可能又没有

那我们是否可以定制自己需要的字体图标呢?答案是肯定的,现在我们就来说说阿里的Iconfont项目。

阿里Iconfont项目

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者,积极在线分享矢量图标制作经验、前端应用说明,及应用中常见的一些问题。

定制自己的Iconfont图标库

进入http://www.iconfont.cn/collections,里面有官方公开库(阿里官方自己使用的)所有公开库(包含网友上传的),你可以选择自己需要的,然后下载即可

PC端应用常见问题

  1. 字体图标在safair或chrome浏览器下被加粗?
    是由于字体图标存在半个像素的锯齿,在浏览器渲染的时候直接显示一个像素了,导致在有背景下的图标显示感觉加粗;所以在应用字体图标的时候需要对图标样式进行抗锯齿处理,CSS代码设置如下:
  2. 字体图标在IE7浏览器显示中图标右侧出现小方框现象
    出现以上现象可以对引用字体图标的非块标签进行以下CSS定义:
  3. 字体图标在pc端的chrome浏览器下出现严重的锯齿
    出现以上现象可以对字体图标的边缘进行模糊;(只支持webkit内核浏览器,参数数值不宜设置得很大,这会带来图标加粗的问题)

为什么大家都用i标签用作小图标?

  • i比较短
  • bootstrap早期就这样用,可能约定俗成
  • 一般情况i很少用,而且基本上不会整体定义这个标签,不会产生样式的冲突
  • bootstrap3.X之后改成了span但是font-awesome还是用的i,相对来说还是用i比较多
  • 用i和span其实都可以满足需求,没必要强求什么

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: