Do you recall, not long ago We would walk on the sidewalk Innocent, remember? All we did was care for each other But the night was warm We were bold and young All around the wind blows We would only hold on to let go Blow a kiss, fire a gun We need someone to lean on Blow a kiss, fire a gun All we need is somebody to lean on Blow a kiss, fire a gun We need someone to lean on Blow a kiss, fire a gun All we need is somebody to lean on What will we do when we get old? Will we walk down the same road? Will you be there by my side? Standing strong as the waves roll over When the nights are long Longing for you to come home All around the wind blows We would only hold on to let go Blow a kiss, fire a gun We need someone to lean on Blow a kiss, fire a gun All we need is somebody to lean on Blow a kiss, fire a gun We need someone to lean on Blow a kiss, fire a gun All we need is somebody to lean on All we need is somebody to lean on All we need is somebody to lean on Lean on, lean on, lean on, lean on... Blow a kiss, fire a gun We need someone to lean on Blow a kiss, fire a gun All we need is somebody to lean on Blow a kiss, fire a gun We need someone to lean on Blow a kiss, fire a gun All we need is somebody to lean on 最近用上了阿里巴巴的矢量图标库后,简直爱不释手,对小网站来说真是太好用了。
有的时候,对于自己开发的小型网站来说,不太想用 bootstrap 这么重的框架,但又想用 bootstrap 里面的字体图标
一般我的做法就是直接手动引入font-awesome,然后在对应要用到图标的地方加 class
但从现在看来,直接引用font-awesome还是有这么一些个很明显的缺陷:

  • font-awesome的图标集比较大,整个图标集有几百个图标,但我实际用到的图标可能只有不到十个
  • 要找到自己想要的图标,必须得去官网查表一个一个的找,有的时候不确定自己想要的图标的英文单词是哪个,就只能一个一个的去看,比如说人民币到底是叫fa-yuan还是fa-rmb。又比如要找学校,到底是找fa-school还是fa-university。这些不确定性导致了我找图标是一个很难受的过程。
  • 有的时候自己想要的图标找不到,比如说我想找描述股票的图标stock,font-awesome里面没有,只能去找类似的顶一顶了。

针对这些问题,阿里弄出了个定制的矢量图标库,完美地解决了以上的全部问题。
这个库里面已经积累了数十万的图标,可以就像购物一样的上去把自己需要的图标放入暂存架(购物车),然后将暂存架中的图标生成字体图标集(下单),然后下载下来(发货),这样子就能实现定制图标字体了,这对于小网站来说简直就是福音,因为小网站一般用到的图标不会太多。
既然这个库这么好用,今天就来说一下这个库要怎么用吧,记录一下它的使用方法。
直接进 阿里巴巴矢量图标库 然后搜索自己需要的图标,看到心仪的图标后点一下放进暂存架,我这里随手挑了 3 个



挑完之后点击“下载到本地”保存到本地电脑上,然后解压出来



点进解压的文件夹,可以看到刚才挑选的图标已经被打包成了对应的各种字体文件



打开demo.html,可以看到里面显示出了对应的字体





现在咱们想要让这个字体图标能够像font-awesome那样使用<i class="icon icon"></i>来显示图标,那么只需要在项目的css文件里面这样配置:

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}


然后设定字体类

.icon {
    font: normal normal normal 14px/1 "iconfont";
    font-size: inherit;
    display: inline-block;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}


再配置好对应的图标类,在这里我们以人民币符号为例,可以看到人民币符号对应的HTML转义序列是&#xe6e0,其实就是16进制的e6e0的意思
写到CSS里面对应的写法如下:

.icon-yuan:before {
  content: "\e6e0";
}


这样子写好CSS以后就能够直接在HTML里面引用了

<span><i class="icon icon-yuan"></i>人民币</span>


效果如下:


这样子就实现了像 font-awesome 一样使用自己定制的字体图标集啦