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

 2015-06-02 15:58

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

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

Fontello - icon fonts generator.jpg

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

Fontello

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文件夹下的东西全部拷贝到自己网站下面即可。就像下图那样:

Fontello

但为了规范,我们还是希望能将其他的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>

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

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: