font-face的字体icon

1 首先要做的就是下载 font-face的字体。需要下载字体文件文件,这两个文件都是后续代码中需要用到的。

主要字体图库

辅助字体功能

2.编写自己的icon类用户加载所有的icon ,这里icon.css中部分的icon应用,你可以跟名称找到对于的icon 比如 icon-music 则对于了音乐的icon,这里提供我自己的icon的地址,可以对应的链接有错误,可以自行修改。icon.css

.icon-glass:before{content:"\f000"}
.icon-music:before{content:"\f001"}
.icon-search:before{content:"\f002"}
.icon-envelope-alt:before{content:"\f003"}
.icon-heart:before{content:"\f004"}
.icon-star:before{content:"\f005"}
.icon-star-empty:before{content:"\f006"}
.icon-user:before{content:"\f007"}
.icon-film:before{content:"\f008"}
.icon-th-large:before{content:"\f009"}
.icon-th:before{content:"\f00a"}
.icon-th-list:before{content:"\f00b"}
.icon-ok:before{content:"\f00c"}
.icon-remove:before{content:"\f00d"}
.icon-zoom-in:before{content:"\f00e"}
.icon-zoom-out:before{content:"\f010"}
.icon-power-off:before,.icon-off:before{content:"\f011"}
.icon-signal:before{content:"\f012"}
.icon-gear:before,.icon-cog:before{content:"\f013"}
.icon-trash:before{content:"\f014"}
.icon-home:before{content:"\f015"}
.icon-file-alt:before{content:"\f016"}

3.然后就是在html中相应的代码运用了,没一个icon-都对于了一个图标

.x-menu
  ul.items
    li.menu-items-type
      a(href="#",target="_blank",title="关于Super xing")
        i.icon-group
    li.menu-items-tyoe
      a(href="#", target="_blank",title="网站地图")
        i.icon-book
    li.menu-items-type
      a(href="#", target="_blank",title="空间支持")
        i.icon-money
    li.menu-items-type
      a(href="#", target="_blank",title="标签")
        i.icon-truck
    li.menu-items-type
      a(href="#", target="_blank",title="订阅")
        i.icon-magic

4.到了这一步,相应漂亮的icon就完成了,对于经常在google中找icon的有很大的帮助。

  1. html3和css3中给的我感觉真的很强大,一些功能经常让人受益匪浅。