杭州网站建设
0211月

FontAwesome 4.0.1 发布,使用指南

更快、更精简、更强大。

在之前的博文中,我们对强大的字体类图标FontAwesome做了极力推荐,随着FontAwesome的逐渐发展,不久前官方发布了4.0.1版本,让我们来一起看看,新版本有什么变化吧。

新版本变动

1、代码完全重写,从而使得代码更精简,加载更迅速。
2、更好的CSS实现,使得渲染更迅速,控制更简便。
3、新的命名规则,新的命名规则让图标的调用更加直观快捷。
4、完全兼容Bootstrap3
5、兼容更多其他前端开发框架,比如Foundation等。
6、添加了十个新的icon图标,目前总icon数达到了370个。


代码中调用FontAwesome

想在页面中引入FontAwesome的方式很简单,可以通过CDN的引入,抑或是下载到本地进行引入。

<linkrel="stylesheet"href="/path/to/font-awesome/css/font-awesome.min.css">

然后就可以在你的代码中进行调用了,新的命名规则遵循 fa-[名称]-[形状]-[线条图标]-[方向] 的形式进行调用。


PS中调用FontAwesome

如果你想要在设计稿中调用FontAwesome,也非常简单方便。

1、下载好FontAwesome,将fonts文件夹里的FontAwesome.otf字体文件进行安装。


2、重启一下PhotoShop,打开项目文件,通过“图标设计引用”页面查找自己想要使用的图标。


3、回到项目文件中,将copy过来的图标粘贴到文字中,再把字体改为FontAwesome,对应的图标就出现了!


写在文章最后

由于是字体图标,FontAwesome支持你随意放大缩小和填充颜色,并且在引入页面中的时候,通过字体图标更加符合SEO搜索引擎优化原则。
如果你一直在寻找一套强大齐全又免费的icon图标以便用在自己的网站设计之中,那么FontAwesome绝对是你不二的选择!

图标CSS参考  图标设计引用


版权属于:佚站互联 - 杭州网站建设

原文地址:http://www.yeahzan.com/blog/item/42-80.html

转载时必须以链接形式注明原始出处及本声明。

文章作者: Benz , 文章分类: 网站设计

关于作者

Benz

评论 (4)

  • 网虫网

    网虫网

    2013-11-03 09:31:21 |
    看起来真不错
  • mmaoc

    mmaoc

    2014-01-15 14:37:08 |
    CSS3 还不普及!!悲哀!~
  • ooing

    ooing

    2014-05-01 08:28:29 |
    火狐浏览器不支持4
  • 3D珠宝

    3D珠宝

    2014-06-07 11:09:08 |
    2、重启一下PhotoShop,打开项目文件,通过“图标设计引用”页面查找自己想要使用的图标。

    呃~!这个“图标设计引用”整了半天没有明白什么意思。你直说复制图标贴贴不就好了~~~~~

发表评论

请登陆后发表评论。