|
|
51CTO旗下网站
|
|
移动端

如何将 Font Awesome 转成 PNG 图标

Font Awesome为Twitter Bootstrap提供了一种独一无二的图像字体.它还提供了CSS的很强的扩展性. CSS 提供了一种描述HTML的机制,可以让你自由的设计网页。 你能给Font Awesome加上各种各样的参数来满足你的需求,比如说改变字体,字体大小,图标颜色,阴影等等。

作者:来源:开源中国社区 编译|2014-04-01 17:07

Font Awesome为Twitter Bootstrap提供了一种***的图像字体.它还提供了CSS的很强的扩展性. CSS 提供了一种描述HTML的机制,可以让你自由的设计网页。 你能给Font Awesome加上各种各样的参数来满足你的需求,比如说改变字体,字体大小,图标颜色,阴影等等。

font-awesome-download

Font Awesome 诱人的特性

Font Awesome只为Boostrap设计, BootStrap是一个前端开发的工具,可以帮助我们在线开发响应式和移动项目。即使你拥有不同的网页设计技能,你也能快速使用Font Awesome设计出富有创造性的图标.即使用单一的字体,你也可以创建369不同风格的图标,这一点很像象形语言. Font Awesome现在的版本是 4.0.0.兼容性问题不是问题,因为它不依赖JavaScript. 定制过程的过程只涉及以直观的方式使用CSS。 其可扩展矢量允许你更改图标的大小,以适应任何设计,让你的标志性设计看起来更加吸引人。


font-awesome-cheatsheet

将Font Awesome转换为PNG
 

Font Awesome能很容易的转换为PNG文件. 这种文件格式支持无损数据压缩,它使用的PNG文件扩展名或为多用途Internet邮件扩展(MIME)的图像/ png格式的媒体类型.使用PNG以全彩色非调色为基础,并支持灰度图像。PNG是一个被广泛使用的网页设计师最常用的无损图像压缩格式。因为在CSS中iconic font 可以使用,你需要将Font Awesome按一下步骤转换为PNG文件:

方法一:

font-awesome-usage

  • Step 4.以下是一个转换 Font Awesome icons 的例子:使用此代码导出24×24像素的播放和停止图标,并且提取Font Awesome图标。

  1. Font-awesome-to-png.py - - size 24 play stop 

使用下列命令导出32 x 32位图的星号图标,来提取Font Awesome图标.

  1. Font-awesome-to-png.py –size 32 –color blue asterisk 

通过使用此代码导出所有可提取Font Awesome图标的图标.

  1. Font-awesome-to-png.py ALL 

可定制你要转换为PNG文件的图标式字体和图标

font-awesome-icons

有很多 Font Awesome 图标,你可以提取并转换成PNG文件。***版本的 Font Awesome 是4.0,它在不断更新不同类别的很棒的新的;图标设计。你可以从这些图标中选择:品牌,Web应用,货币,表单控制,方向,文本编辑器,医疗和视频播放器。这些图标在视网膜显示器上看起来很好,因为它们是矢量图形。

Font Awesome 4.0 中的更新

如果您运行的是 Font Awesome 的旧版本3.2.1,现在可以直接从 Font Awesome 网站升级到***的 4.0 版。有很多可供网页设计师选择的自定义选项,包括内陆生物图标,大图标和固定宽度的图标,旋转中的图标,堆叠的和旋转方向的,还有翻转的图标等等。

font-awesome-customization

您可以提取该文件,并使用上述步骤转换成PNG格式。  关于Font Awesome的***的事情是,它是一个开源的,任何人都可以随时相应地缩放图标的大小不影响图标的图形质量。      有时改变图像的大小可以妥协,特别是当它的大小被放大的图像的像素化。  此问题不会发生在Font Awesome图标,因为它有保留其原始像素的高品质状况的能力。      网页设计师建议使用PNG格式的Font Awesome图标,此时图像的质量较好时且不小于216px x216px大小。

英文原文:How to convert Font Awesome to png icons

译文链接:http://www.oschina.net/translate/how-to-convert-font-awesome-to-png-icons

【责任编辑:林师授 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

289人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

645人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

XML基础教程

本书分为8章。第1章主要对XML做了简单的介绍。第2章详细讲解规范的XML文件。第3章主要讲解有效的XML文件,特别重点讲解DTD文件。第4章讲解C...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客