如何将 Font Awesome 转成 PNG 图标 已翻译 100%

oschina 投递于 2014/03/26 07:52 (共 5 段, 翻译完成于 03-30)
阅读 15528
收藏 98
6
加载中

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

Mike-Tang
Mike-Tang
翻译于 2014/03/26 10:24
1

将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图标。

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

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

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

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

    Font-awesome-to-png.py ALL

Mike-Tang
Mike-Tang
翻译于 2014/03/26 10:34
1

第二种方法:

Font Awesome也可以使用PHP进行转换成png格式,以下是转换的代码。

font-awesome-php

  • Step 1. 你的web服务器应该能加载php5和gd库。

  • Step 2. 从Font Awesome网站上下载文件。

  • Step 3. 从GitHub上获取Font Awesome字体文件,确保他被放在和你的PHP指定目录下。

  • Step 4. 在终端中执行php代码

修改生成的 .php文件

1.可以用PHP生成任意尺寸的PNG图像,如这段代码所示:

$outputSizes =
 array(’128′, ’96′, ’64′, ’48′, ’32′, ’24′, ’16′);

根据您的喜好通过从代码减少或增加的数量只需修改尺寸。

2. Font Awesome 的颜色也能被PHP设定:

$outputColors = array
(
    ‘white’=>array(‘r’=>255, ‘g’=>255, ‘b’=>255),
    ‘grey’=>array(‘r’=>128, ‘g’=>128, ‘b’=>128),
    ‘black’=>array(‘r’=>0, ‘g’=>0, ‘b’=>0),
);

3. 修改icons.data.php

你需要调整的icons.data.ph代码的字符代码的Font Awesome映射到输出的PNG编码的文件。每次Font Awesome添加新增加图标到它的数据的时候,也可以根据您想要从PNG文件的Font Awesome图标风格作适当的修改。你可以修改  CSS file of Font Awesome 达成上述的目标.  例如,如果你想要将Font Awesome字体添加透明效果,则修改的CSS文件中的代码将看起来像这样:

fa-glass:before{
    content: “\f000”;
}

之后的PHP代码看起来向这个样子:

$icons = array 
( 
    'glass'=>array('code'=>''), 
);
Mike-Tang
Mike-Tang
翻译于 2014/03/29 13:53
1

可定制你要转换为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 版。有很多可供网页设计师选择的自定义选项,包括内陆生物图标,大图标和固定宽度的图标,旋转中的图标,堆叠的和旋转方向的,还有翻转的图标等等。

赵亮-碧海情天
赵亮-碧海情天
翻译于 2014/03/26 17:26
1

font-awesome-customization

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

Mike-Tang
Mike-Tang
翻译于 2014/03/26 14:08
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(16)

okool
okool
麻蛋我在找png转svg,ttf,你妹你们竟然还反其道而行。自定义字体ie6以前就支持了,也是微软和mac先发起的。把字体下下来,用ps加载,打一下这个图标的文字就出来了,转什么图片都行,还用工具?这妈蛋疼反人类的先人。艹,sb!不可原谅
TonyJian
TonyJian

还是ICOMOON最NX,一样的东西,但是里面的图标库啥都有,css方式不兼容就用unicode好了,何必搞个图片,开发人员最蛋疼的就是不会用ps,随然我的ps还算可以,但不是每个人都好啊:D

阿改

我正好要得着啊

Zoker
Zoker

还是字体好用,比如在mac下,网页按钮有图片的感觉就乖乖的,可是字体图片就很nice了,毕竟是矢量的。

超哥哥好啊
超哥哥好啊

难道真是我撸多了?界面怎么突然模糊了??????

水牛叔叔
水牛叔叔

引用来自“cokolin”的评论

svg还是不如字体好吧,字体设置颜色很容易啊

引用来自“缪斯的情人”的评论

no,no,使用字体加载svg文件,也可以很方便的设置字体颜色,参考阿里的图标库(http://www.iconfont.cn/),而且很容易兼容ie6等低版本浏览器,svg文件也便于维护。

so good

缪斯的情人
缪斯的情人

引用来自“cokolin”的评论

svg还是不如字体好吧,字体设置颜色很容易啊

引用来自“缪斯的情人”的评论

no,no,使用字体加载svg文件,也可以很方便的设置字体颜色,参考阿里的图标库(http://www.iconfont.cn/),而且很容易兼容ie6等低版本浏览器,svg文件也便于维护。

引用来自“hantsy”的评论

IE 6 支持 SVG 吗?别开玩笑了。现在的 SVG 我觉得与 HTML 5 Canvas 竞争差不多,对于编程式图形处理(比如各种报表图形)有优势。

svg可以轻松转为转为eot格式,ie6支持eot格式。

hantsy
hantsy

这种图形还是 Font Awesome 最好,为什么要转变成图片。

hantsy
hantsy

引用来自“cokolin”的评论

svg还是不如字体好吧,字体设置颜色很容易啊

引用来自“缪斯的情人”的评论

no,no,使用字体加载svg文件,也可以很方便的设置字体颜色,参考阿里的图标库(http://www.iconfont.cn/),而且很容易兼容ie6等低版本浏览器,svg文件也便于维护。

IE 6 支持 SVG 吗?别开玩笑了。现在的 SVG 我觉得与 HTML 5 Canvas 竞争差不多,对于编程式图形处理(比如各种报表图形)有优势。

NinjaSquid
NinjaSquid

我想知道怎么把这些图标弄成彩色的?

返回顶部
顶部