fontello：超级好用的icon fonts图标在线制作网站

fontello：超级好用的icon fonts图标在线制作网站

 2015-06-02 15:58    网页设计   标签：设计 css   5171    发表评论

近期，我一直在捣鼓我的网站。昨天晚上，由于需要使用icon fonts图标，我搜索了下在线看是否有可以直接生成的，结果发现了fontello.com这个网站，从在线到使用都的确不错，今天特意推荐给大家。

网站主题很明确，就是方面大家使用icon图标。打开fontello的界面，我们可以看到比较简单的操作页面，大家可以通过点击图标的方式选取所需要的图标按钮。在右上角的“Download webfont”中我们可到你已经选择的数量。这也是fontello做的比较好的一个方面，选择你需要的，不用的就放弃。

我选择了18个按钮，系统自动生成了一个压缩包，下载解压后发现了这些文件数据：

License.txt和readme.txt两个文件是操作说明，你如果很明白英文的话可以直接阅读，demo.html现在改变成最新的样子，里面的代码可以让我们根据其使用方法进行模仿。css文件里面有animation.css、fontello.css、fontello-codes.css、fontello-embedded.css、fontello-ie7.css和fontello-ie7-codes.css6个CSS文件，一般说来，我们只要fontello.css这个文件即可，然后按照css文件里面的调用关系，把font文件夹下的东西全部拷贝到自己网站下面即可。就像下图那样：

但为了规范，我们还是希望能将其他的css也用上，它们有些是规范IE7浏览器使用的方法。

在代码方面，我们需要调整的是这样一段代码，将其中的文件路径调整到你实际的路径。这样，系统才能找到所谓的图标字符。

@font-face {
  font-family: 'fontello';
  src: url('font/fontello.eot?37203795');
  src: url('font/fontello.eot?37203795#iefix') format('embedded-opentype'),
       url('font/fontello.woff?37203795') format('woff'),
       url('font/fontello.ttf?37203795') format('truetype'),
       url('font/fontello.svg?37203795#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

当你完成以上两项事宜时，你就可以在网站上正常使用图标字符了，使用的方法在class里面调用对应的“icon-XXX”即可，一部情况下，我们使用的是如下两种调用方式：

<span class="icon-qq"></span>
<i class="icon-qq"></i>

这些都没有特别的要求，使用即可。