如何将 Font Awesome 转成 PNG 图标详细教程含源代码-学到老web开发

如何将 Font Awesome 转成 PNG 图标详细教程含源代码

发表于:2015-07-13 14:30:05 | 1659次阅读| 作者:html,css

摘要：最近因为项目上需要用到这个字体图标，但是它里面的许多也不能完全满足项目需要，因此就考虑将这个图标导出，然后自己再添加一些其他图标使用搜索了些解决方案，如：http://www.oschina.net/translate/how-to-convert-font-awesome-to-png-icons...

最近因为项目上需要用到这个字体图标，但是它里面的许多也不能完全满足项目需要，因此就考虑将这个图标导出，然后自己再添加一些其他图标使用

搜索了些解决方案，如：http://www.oschina.net/translate/how-to-convert-font-awesome-to-png-icons，但是上面的步骤过于简单，一个新手完全不会使用，比如Python自己就一点都没接触过，因此自己走了许多弯路。

本文一方面记录以便以后自己再次使用，最重要的是将我自己的每个步骤详细的展现给有需要的大家，希望对大家有帮助。

好还请留个好评

本文涉及所有资源可以到我的百度云下载：

font-awesome-to-png

第一步 下载图标字体源文件：

包含以下文件：

第二步 安装python-2.7.9（我电脑是64位的，截图也是64位，实际上只能安装32位，64位图标处理库（第二部会安装以处理图片）找不到安装路径，安装过程是一样的）

第三步 安装图形处理库

安装完成后：菜单》全部程序》 Python 2.7发现已经安装成功

第四部 你下载文件里面有个目录font-awesome-to-png 里面有将会使用的脚本文件和字体文件（也是你第一步下载的文件）

来点其他参数

颜色变了，证明其他参数也是可靠的，大功告成。

源代码1 font-awesome-to-png.py：

001#!/usr/bin/env python
002 
003#
004# font-awesome-to-png.py
005#
006# Exports Font Awesome icons as PNG images.
007#
008# Copyright (c) 2012-2014 Michal Wojciechowski (http://odyniec.net/)
009#
010# Font Awesome - http://fortawesome.github.com/Font-Awesome
011#
012 
013import sys, argparse, re
014from os import path, access, R_OK
015from PIL import Image, ImageFont, ImageDraw
016 
017# Support Unicode literals with both Python 2 and 3
018if sys.version < '3':
019    import codecs
020    def u(x):
021        return codecs.unicode_escape_decode(x)[0]
022 
023    def uchr(x):
024        return unichr(x)
025else:
026    def u(x):
027        return x
028 
029    def uchr(x):
030        return chr(x)
031 
032# Mapping of icon names to character codes
033icons = {
034    "adjust": u("\uf042"),
035    "adn": u("\uf170"),
036    "align-center": u("\uf037"),
037    "align-justify": u("\uf039"),
038    "align-left": u("\uf036"),
039    "align-right": u("\uf038"),
040    "ambulance": u("\uf0f9"),
041    "anchor": u("\uf13d"),
042    "android": u("\uf17b"),
043    "angle-double-down": u("\uf103"),
044    "angle-double-left": u("\uf100"),
045    "angle-double-right": u("\uf101"),
046    "angle-double-up": u("\uf102"),
047    "angle-down": u("\uf107"),
048    "angle-left": u("\uf104"),
049    "angle-right": u("\uf105"),
050    "angle-up": u("\uf106"),
051    "apple": u("\uf179"),
052    "archive": u("\uf187"),
053    "arrow-circle-down": u("\uf0ab"),
054    "arrow-circle-left": u("\uf0a8"),
055    "arrow-circle-o-down": u("\uf01a"),
056    "arrow-circle-o-left": u("\uf190"),
057    "arrow-circle-o-right": u("\uf18e"),
058    "arrow-circle-o-up": u("\uf01b"),
059    "arrow-circle-right": u("\uf0a9"),
060    "arrow-circle-up": u("\uf0aa"),
061    "arrow-down": u("\uf063"),
062    "arrow-left": u("\uf060"),
063    "arrow-right": u("\uf061"),
064    "arrow-up": u("\uf062"),
065    "arrows": u("\uf047"),
066    "arrows-alt": u("\uf0b2"),
067    "arrows-h": u("\uf07e"),
068    "arrows-v": u("\uf07d"),
069    "asterisk": u("\uf069"),
070    "automobile": u("\uf1b9"),
071    "backward": u("\uf04a"),
072    "ban": u("\uf05e"),
073    "bank": u("\uf19c"),
074    "bar-chart-o": u("\uf080"),
075    "barcode": u("\uf02a"),
076    "bars": u("\uf0c9"),
077    "beer": u("\uf0fc"),
078    "behance": u("\uf1b4"),
079    "behance-square": u("\uf1b5"),
080    "bell": u("\uf0f3"),
081    "bell-o": u("\uf0a2"),
082    "bitbucket": u("\uf171"),
083    "bitbucket-square": u("\uf172"),
084    "bitcoin": u("\uf15a"),
085    "bold": u("\uf032"),
086    "bolt": u("\uf0e7"),
087    "bomb": u("\uf1e2"),
088    "book": u("\uf02d"),
089    "bookmark": u("\uf02e"),
090    "bookmark-o": u("\uf097"),
091    "briefcase": u("\uf0b1"),
092    "btc": u("\uf15a"),
093    "bug": u("\uf188"),
094    "building": u("\uf1ad"),
095    "building-o": u("\uf0f7"),
096    "bullhorn": u("\uf0a1"),
097    "bullseye": u("\uf140"),
098    "cab": u("\uf1ba"),
099    "calendar": u("\uf073"),
100    "calendar-o": u("\uf133"),
101    "camera": u("\uf030"),
102    "camera-retro": u("\uf083"),
103    "car": u("\uf1b9"),
104    "caret-down": u("\uf0d7"),
105    "caret-left": u("\uf0d9"),
106    "caret-right": u("\uf0da"),
107    "caret-square-o-down": u("\uf150"),
108    "caret-square-o-left": u("\uf191"),
109    "caret-square-o-right": u("\uf152"),
110    "caret-square-o-up": u("\uf151"),
111    "caret-up": u("\uf0d8"),
112    "certificate": u("\uf0a3"),
113    "chain": u("\uf0c1"),
114    "chain-broken": u("\uf127"),
115    "check": u("\uf00c"),
116    "check-circle": u("\uf058"),
117    "check-circle-o": u("\uf05d"),
118    "check-square": u("\uf14a"),
119    "check-square-o": u("\uf046"),
120    "chevron-circle-down": u("\uf13a"),
121    "chevron-circle-left": u("\uf137"),
122    "chevron-circle-right": u("\uf138"),
123    "chevron-circle-up": u("\uf139"),
124    "chevron-down": u("\uf078"),
125    "chevron-left": u("\uf053"),
126    "chevron-right": u("\uf054"),
127    "chevron-up": u("\uf077"),
128    "child": u("\uf1ae"),
129    "circle": u("\uf111"),
130    "circle-o": u("\uf10c"),
131    "circle-o-notch": u("\uf1ce"),
132    "circle-thin": u("\uf1db"),
133    "clipboard": u("\uf0ea"),
134    "clock-o": u("\uf017"),
135    "cloud": u("\uf0c2"),
136    "cloud-download": u("\uf0ed"),
137    "cloud-upload": u("\uf0ee"),
138    "cny": u("\uf157"),
139    "code": u("\uf121"),
140    "code-fork": u("\uf126"),
141    "codepen": u("\uf1cb"),
142    "coffee": u("\uf0f4"),
143    "cog": u("\uf013"),
144    "cogs": u("\uf085"),
145    "columns": u("\uf0db"),
146    "comment": u("\uf075"),
147    "comment-o": u("\uf0e5"),
148    "comments": u("\uf086"),
149    "comments-o": u("\uf0e6"),
150    "compass": u("\uf14e"),
151    "compress": u("\uf066"),
152    "copy": u("\uf0c5"),
153    "credit-card": u("\uf09d"),
154    "crop": u("\uf125"),
155    "crosshairs": u("\uf05b"),
156    "css3": u("\uf13c"),
157    "cube": u("\uf1b2"),
158    "cubes": u("\uf1b3"),
159    "cut": u("\uf0c4"),
160    "cutlery": u("\uf0f5"),
161    "dashboard": u("\uf0e4"),
162    "database": u("\uf1c0"),
163    "dedent": u("\uf03b"),
164    "delicious": u("\uf1a5"),
165    "desktop": u("\uf108"),
166    "deviantart": u("\uf1bd"),
167    "digg": u("\uf1a6"),
168    "dollar": u("\uf155"),
169    "dot-circle-o": u("\uf192"),
170    "download": u("\uf019"),
171    "dribbble": u("\uf17d"),
172    "dropbox": u("\uf16b"),
173    "drupal": u("\uf1a9"),
174    "edit": u("\uf044"),
175    "eject": u("\uf052"),
176    "ellipsis-h": u("\uf141"),
177    "ellipsis-v": u("\uf142"),
178    "empire": u("\uf1d1"),
179    "envelope": u("\uf0e0"),
180    "envelope-o": u("\uf003"),
181    "envelope-square": u("\uf199"),
182    "eraser": u("\uf12d"),
183    "eur": u("\uf153"),
184    "euro": u("\uf153"),
185    "exchange": u("\uf0ec"),
186    "exclamation": u("\uf12a"),
187    "exclamation-circle": u("\uf06a"),
188    "exclamation-triangle": u("\uf071"),
189    "expand": u("\uf065"),
190    "external-link": u("\uf08e"),
191    "external-link-square": u("\uf14c"),
192    "eye": u("\uf06e"),
193    "eye-slash": u("\uf070"),
194    "facebook": u("\uf09a"),
195    "facebook-square": u("\uf082"),
196    "fast-backward": u("\uf049"),
197    "fast-forward": u("\uf050"),
198    "fax": u("\uf1ac"),
199    "female": u("\uf182"),
200    "fighter-jet": u("\uf0fb"),
201    "file": u("\uf15b"),
202    "file-archive-o": u("\uf1c6"),
203    "file-audio-o": u("\uf1c7"),
204    "file-code-o": u("\uf1c9"),
205    "file-excel-o": u("\uf1c3"),
206    "file-image-o": u("\uf1c5"),
207    "file-movie-o": u("\uf1c8"),
208    "file-o": u("\uf016"),
209    "file-pdf-o": u("\uf1c1"),
210    "file-photo-o": u("\uf1c5"),
211    "file-picture-o": u("\uf1c5"),
212    "file-powerpoint-o": u("\uf1c4"),
213    "file-sound-o": u("\uf1c7"),
214    "file-text": u("\uf15c"),
215    "file-text-o": u("\uf0f6"),
216    "file-video-o": u("\uf1c8"),
217    "file-word-o": u("\uf1c2"),
218    "file-zip-o": u("\uf1c6"),
219    "files-o": u("\uf0c5"),
220    "film": u("\uf008"),
221    "filter": u("\uf0b0"),
222    "fire": u("\uf06d"),
223    "fire-extinguisher": u("\uf134"),
224    "flag": u("\uf024"),
225    "flag-checkered": u("\uf11e"),
226    "flag-o": u("\uf11d"),
227    "flash": u("\uf0e7"),
228    "flask": u("\uf0c3"),
229    "flickr": u("\uf16e"),
230    "floppy-o": u("\uf0c7"),
231    "folder": u("\uf07b"),
232    "folder-o": u("\uf114"),
233    "folder-open": u("\uf07c"),
234    "folder-open-o": u("\uf115"),
235    "font": u("\uf031"),
236    "forward": u("\uf04e"),
237    "foursquare": u("\uf180"),
238    "frown-o": u("\uf119"),
239    "gamepad": u("\uf11b"),
240    "gavel": u("\uf0e3"),
241    "gbp": u("\uf154"),
242    "ge": u("\uf1d1"),
243    "gear": u("\uf013"),
244    "gears": u("\uf085"),
245    "gift": u("\uf06b"),
246    "git": u("\uf1d3"),
247    "git-square": u("\uf1d2"),
248    "github": u("\uf09b"),
249    "github-alt": u("\uf113"),
250    "github-square": u("\uf092"),
251    "gittip": u("\uf184"),
252    "glass": u("\uf000"),
253    "globe": u("\uf0ac"),
254    "google": u("\uf1a0"),
255    "google-plus": u("\uf0d5"),
256    "google-plus-square": u("\uf0d4"),
257    "graduation-cap": u("\uf19d"),
258    "group": u("\uf0c0"),
259    "h-square": u("\uf0fd"),
260    "hacker-news": u("\uf1d4"),
261    "hand-o-down": u("\uf0a7"),
262    "hand-o-left": u("\uf0a5"),
263    "hand-o-right": u("\uf0a4"),
264    "hand-o-up": u("\uf0a6"),
265    "hdd-o": u("\uf0a0"),
266    "header": u("\uf1dc"),
267    "headphones": u("\uf025"),
268    "heart": u("\uf004"),
269    "heart-o": u("\uf08a"),
270    "history": u("\uf1da"),
271    "home": u("\uf015"),
272    "hospital-o": u("\uf0f8"),
273    "html5": u("\uf13b"),
274    "image": u("\uf03e"),
275    "inbox": u("\uf01c"),
276    "indent": u("\uf03c"),
277    "info": u("\uf129"),
278    "info-circle": u("\uf05a"),
279    "inr": u("\uf156"),
280    "instagram": u("\uf16d"),
281    "institution": u("\uf19c"),
282    "italic": u("\uf033"),
283    "joomla": u("\uf1aa"),
284    "jpy": u("\uf157"),
285    "jsfiddle": u("\uf1cc"),
286    "key": u("\uf084"),
287    "keyboard-o": u("\uf11c"),
288    "krw": u("\uf159"),
289    "language": u("\uf1ab"),
290    "laptop": u("\uf109"),
291    "leaf": u("\uf06c"),
292    "legal": u("\uf0e3"),
293    "lemon-o": u("\uf094"),
294    "level-down": u("\uf149"),
295    "level-up": u("\uf148"),
296    "life-bouy": u("\uf1cd"),
297    "life-ring": u("\uf1cd"),
298    "life-saver": u("\uf1cd"),
299    "lightbulb-o": u("\uf0eb"),
300    "link": u("\uf0c1"),
301    "linkedin": u("\uf0e1"),
302    "linkedin-square": u("\uf08c"),
303    "linux": u("\uf17c"),
304    "list": u("\uf03a"),
305    "list-alt": u("\uf022"),
306    "list-ol": u("\uf0cb"),
307    "list-ul": u("\uf0ca"),
308    "location-arrow": u("\uf124"),
309    "lock": u("\uf023"),
310    "long-arrow-down": u("\uf175"),
311    "long-arrow-left": u("\uf177"),
312    "long-arrow-right": u("\uf178"),
313    "long-arrow-up": u("\uf176"),
314    "magic": u("\uf0d0"),
315    "magnet": u("\uf076"),
316    "mail-forward": u("\uf064"),
317    "mail-reply": u("\uf112"),
318    "mail-reply-all": u("\uf122"),
319    "male": u("\uf183"),
320    "map-marker": u("\uf041"),
321    "maxcdn": u("\uf136"),
322    "medkit": u("\uf0fa"),
323    "meh-o": u("\uf11a"),
324    "microphone": u("\uf130"),
325    "microphone-slash": u("\uf131"),
326    "minus": u("\uf068"),
327    "minus-circle": u("\uf056"),
328    "minus-square": u("\uf146"),
329    "minus-square-o": u("\uf147"),
330    "mobile": u("\uf10b"),
331    "mobile-phone": u("\uf10b"),
332    "money": u("\uf0d6"),
333    "moon-o": u("\uf186"),
334    "mortar-board": u("\uf19d"),
335    "music": u("\uf001"),
336    "navicon": u("\uf0c9"),
337    "openid": u("\uf19b"),
338    "outdent": u("\uf03b"),
339    "pagelines": u("\uf18c"),
340    "paper-plane": u("\uf1d8"),
341    "paper-plane-o": u("\uf1d9"),
342    "paperclip": u("\uf0c6"),
343    "paragraph": u("\uf1dd"),
344    "paste": u("\uf0ea"),
345    "pause": u("\uf04c"),
346    "paw": u("\uf1b0"),
347    "pencil": u("\uf040"),
348    "pencil-square": u("\uf14b"),
349    "pencil-square-o": u("\uf044"),
350    "phone": u("\uf095"),
351    "phone-square": u("\uf098"),
352    "photo": u("\uf03e"),
353    "picture-o": u("\uf03e"),
354    "pied-piper": u("\uf1a7"),
355    "pied-piper-alt": u("\uf1a8"),
356    "pied-piper-square": u("\uf1a7"),
357    "pinterest": u("\uf0d2"),
358    "pinterest-square": u("\uf0d3"),
359    "plane": u("\uf072"),
360    "play": u("\uf04b"),
361    "play-circle": u("\uf144"),
362    "play-circle-o": u("\uf01d"),
363    "plus": u("\uf067"),
364    "plus-circle": u("\uf055"),
365    "plus-square": u("\uf0fe"),
366    "plus-square-o": u("\uf196"),
367    "power-off": u("\uf011"),
368    "print": u("\uf02f"),
369    "puzzle-piece": u("\uf12e"),
370    "qq": u("\uf1d6"),
371    "qrcode": u("\uf029"),
372    "question": u("\uf128"),
373    "question-circle": u("\uf059"),
374    "quote-left": u("\uf10d"),
375    "quote-right": u("\uf10e"),
376    "ra": u("\uf1d0"),
377    "random": u("\uf074"),
378    "rebel": u("\uf1d0"),
379    "recycle": u("\uf1b8"),
380    "reddit": u("\uf1a1"),
381    "reddit-square": u("\uf1a2"),
382    "refresh": u("\uf021"),
383    "renren": u("\uf18b"),
384    "reorder": u("\uf0c9"),
385    "repeat": u("\uf01e"),
386    "reply": u("\uf112"),
387    "reply-all": u("\uf122"),
388    "retweet": u("\uf079"),
389    "rmb": u("\uf157"),
390    "road": u("\uf018"),
391    "rocket": u("\uf135"),
392    "rotate-left": u("\uf0e2"),
393    "rotate-right": u("\uf01e"),
394    "rouble": u("\uf158"),
395    "rss": u("\uf09e"),
396    "rss-square": u("\uf143"),
397    "rub": u("\uf158"),
398    "ruble": u("\uf158"),
399    "rupee": u("\uf156"),
400    "save": u("\uf0c7"),
401    "scissors": u("\uf0c4"),
402    "search": u("\uf002"),
403    "search-minus": u("\uf010"),
404    "search-plus": u("\uf00e"),
405    "send": u("\uf1d8"),
406    "send-o": u("\uf1d9"),
407    "share": u("\uf064"),
408    "share-alt": u("\uf1e0"),
409    "share-alt-square": u("\uf1e1"),
410    "share-square": u("\uf14d"),
411    "share-square-o": u("\uf045"),
412    "shield": u("\uf132"),
413    "shopping-cart": u("\uf07a"),
414    "sign-in": u("\uf090"),
415    "sign-out": u("\uf08b"),
416    "signal": u("\uf012"),
417    "sitemap": u("\uf0e8"),
418    "skype": u("\uf17e"),
419    "slack": u("\uf198"),
420    "sliders": u("\uf1de"),
421    "smile-o": u("\uf118"),
422    "sort": u("\uf0dc"),
423    "sort-alpha-asc": u("\uf15d"),
424    "sort-alpha-desc": u("\uf15e"),
425    "sort-amount-asc": u("\uf160"),
426    "sort-amount-desc": u("\uf161"),
427    "sort-asc": u("\uf0de"),
428    "sort-desc": u("\uf0dd"),
429    "sort-down": u("\uf0dd"),
430    "sort-numeric-asc": u("\uf162"),
431    "sort-numeric-desc": u("\uf163"),
432    "sort-up": u("\uf0de"),
433    "soundcloud": u("\uf1be"),
434    "space-shuttle": u("\uf197"),
435    "spinner": u("\uf110"),
436    "spoon": u("\uf1b1"),
437    "spotify": u("\uf1bc"),
438    "square": u("\uf0c8"),
439    "square-o": u("\uf096"),
440    "stack-exchange": u("\uf18d"),
441    "stack-overflow": u("\uf16c"),
442    "star": u("\uf005"),
443    "star-half": u("\uf089"),
444    "star-half-empty": u("\uf123"),
445    "star-half-full": u("\uf123"),
446    "star-half-o": u("\uf123"),
447    "star-o": u("\uf006"),
448    "steam": u("\uf1b6"),
449    "steam-square": u("\uf1b7"),
450    "step-backward": u("\uf048"),
451    "step-forward": u("\uf051"),
452    "stethoscope": u("\uf0f1"),
453    "stop": u("\uf04d"),
454    "strikethrough": u("\uf0cc"),
455    "stumbleupon": u("\uf1a4"),
456    "stumbleupon-circle": u("\uf1a3"),
457    "subscript": u("\uf12c"),
458    "suitcase": u("\uf0f2"),
459    "sun-o": u("\uf185"),
460    "superscript": u("\uf12b"),
461    "support": u("\uf1cd"),
462    "table": u("\uf0ce"),
463    "tablet": u("\uf10a"),
464    "tachometer": u("\uf0e4"),
465    "tag": u("\uf02b"),
466    "tags": u("\uf02c"),
467    "tasks": u("\uf0ae"),
468    "taxi": u("\uf1ba"),
469    "tencent-weibo": u("\uf1d5"),
470    "terminal": u("\uf120"),
471    "text-height": u("\uf034"),
472    "text-width": u("\uf035"),
473    "th": u("\uf00a"),
474    "th-large": u("\uf009"),
475    "th-list": u("\uf00b"),
476    "thumb-tack": u("\uf08d"),
477    "thumbs-down": u("\uf165"),
478    "thumbs-o-down": u("\uf088"),
479    "thumbs-o-up": u("\uf087"),
480    "thumbs-up": u("\uf164"),
481    "ticket": u("\uf145"),
482    "times": u("\uf00d"),
483    "times-circle": u("\uf057"),
484    "times-circle-o": u("\uf05c"),
485    "tint": u("\uf043"),
486    "toggle-down": u("\uf150"),
487    "toggle-left": u("\uf191"),
488    "toggle-right": u("\uf152"),
489    "toggle-up": u("\uf151"),
490    "trash-o": u("\uf014"),
491    "tree": u("\uf1bb"),
492    "trello": u("\uf181"),
493    "trophy": u("\uf091"),
494    "truck": u("\uf0d1"),
495    "try": u("\uf195"),
496    "tumblr": u("\uf173"),
497    "tumblr-square": u("\uf174"),
498    "turkish-lira": u("\uf195"),
499    "twitter": u("\uf099"),
500    "twitter-square": u("\uf081"),
501    "umbrella": u("\uf0e9"),
502    "underline": u("\uf0cd"),
503    "undo": u("\uf0e2"),
504    "university": u("\uf19c"),
505    "unlink": u("\uf127"),
506    "unlock": u("\uf09c"),
507    "unlock-alt": u("\uf13e"),
508    "unsorted": u("\uf0dc"),
509    "upload": u("\uf093"),
510    "usd": u("\uf155"),
511    "user": u("\uf007"),
512    "user-md": u("\uf0f0"),
513    "users": u("\uf0c0"),
514    "video-camera": u("\uf03d"),
515    "vimeo-square": u("\uf194"),
516    "vine": u("\uf1ca"),
517    "vk": u("\uf189"),
518    "volume-down": u("\uf027"),
519    "volume-off": u("\uf026"),
520    "volume-up": u("\uf028"),
521    "warning": u("\uf071"),
522    "wechat": u("\uf1d7"),
523    "weibo": u("\uf18a"),
524    "weixin": u("\uf1d7"),
525    "wheelchair": u("\uf193"),
526    "windows": u("\uf17a"),
527    "won": u("\uf159"),
528    "wordpress": u("\uf19a"),
529    "wrench": u("\uf0ad"),
530    "xing": u("\uf168"),
531    "xing-square": u("\uf169"),
532    "yahoo": u("\uf19e"),
533    "yen": u("\uf157"),
534    "youtube": u("\uf167"),
535    "youtube-play": u("\uf16a"),
536    "youtube-square": u("\uf166"),
537}
538 
539 
540class ListAction(argparse.Action):
541    def __call__(self, parser, namespace, values, option_string=None):
542        for icon in sorted(icons.keys()):
543            print(icon)
544        exit(0)
545 
546 
547class ListUpdateAction(argparse.Action):
548    def __call__(self, parser, namespace, values, option_string=None):
549        print("icons = {")
550        for icon in sorted(icons.keys()):
551            print(u'    "%s": u("\\u%x"),' % (icon, ord(icons[icon])))
552        print("}")
553        exit(0)
554 
555 
556def export_icon(icon, size, filename, font, color):
557    image = Image.new("RGBA", (size, size), color=(0,0,0,0))
558 
559    draw = ImageDraw.Draw(image)
560 
561    # Initialize font
562    font = ImageFont.truetype(font, size)
563 
564    # Determine the dimensions of the icon
565    width,height = draw.textsize(icons[icon], font=font)
566 
567    draw.text(((size - width) / 2, (size - height) / 2), icons[icon],
568            font=font, fill=color)
569 
570    # Get bounding box
571    bbox = image.getbbox()
572 
573    # Create an alpha mask
574    imagemask = Image.new("L", (size, size), 0)
575    drawmask = ImageDraw.Draw(imagemask)
576 
577    # Draw the icon on the mask
578    drawmask.text(((size - width) / 2, (size - height) / 2), icons[icon],
579        font=font, fill=255)
580 
581    # Create a solid color image and apply the mask
582    iconimage = Image.new("RGBA", (size,size), color)
583    iconimage.putalpha(imagemask)
584 
585    if bbox:
586        iconimage = iconimage.crop(bbox)
587 
588    borderw = int((size - (bbox[2] - bbox[0])) / 2)
589    borderh = int((size - (bbox[3] - bbox[1])) / 2)
590 
591    # Create output image
592    outimage = Image.new("RGBA", (size, size), (0,0,0,0))
593    outimage.paste(iconimage, (borderw,borderh))
594 
595    # Save file
596    outimage.save(filename)
597 
598 
599class LoadCSSAction(argparse.Action):
600    def __call__(self, parser, namespace, values, option_string=None):
601        global icons
602        icons = LoadCSSAction._load_css(values)
603 
604    @staticmethod
605    def _load_css(filename):
606        import tinycss
607        new_icons = {}
608        parser = tinycss.make_parser("page3")
609 
610        try:
611            stylesheet = parser.parse_stylesheet_file(filename)
612        except IOError:
613            print >> sys.stderr, ("Error: CSS file (%s) can't be opened"
614                % (filename))
615            exit(1)
616 
617        is_icon = re.compile(u("\.fa-(.*):before,?"))
618        for rule in stylesheet.rules:
619            selector = rule.selector.as_css()
620            for match in is_icon.finditer(selector):
621                name = match.groups()[0]
622                for declaration in rule.declarations:
623                    if declaration.name == u"content":
624                        val = declaration.value.as_css()
625                        if val.startswith('"') and val.endswith('"'):
626                            val = val[1:-1]
627                        new_icons[name] = uchr(int(val[1:], 16))
628        return new_icons
629 
630 
631if __name__ == '__main__':
632    parser = argparse.ArgumentParser(
633            description="Exports Font Awesome icons as PNG images.")
634 
635    parser.add_argument("icon", type=str, nargs="+",
636            help="The name(s) of the icon(s) to export (or \"ALL\" for all icons)")
637    parser.add_argument("--color", type=str, default="black",
638            help="Color (HTML color code or name, default: black)")
639    parser.add_argument("--filename", type=str,
640            help="The name of the output file (it must end with \".png\"). If " +
641            "all files are exported, it is used as a prefix.")
642    parser.add_argument("--font", type=str, default="fontawesome-webfont.ttf",
643            help="Font file to use (default: fontawesome-webfont.ttf)")
644    parser.add_argument("--css", type=str, default="", action=LoadCSSAction,
645            help="Path to the CSS file defining icon names (instead of the " +
646            "predefined list)")
647    parser.add_argument("--list", nargs=0, action=ListAction,
648            help="List available icon names and exit")
649    parser.add_argument("--list-update", nargs=0, action=ListUpdateAction,
650            help=argparse.SUPPRESS)
651    parser.add_argument("--size", type=int, default=16,
652            help="Icon size in pixels (default: 16)")
653 
654    args = parser.parse_args()
655    icon = args.icon
656    size = args.size
657    font = args.font
658    color = args.color
659 
660    if args.font:
661        if not path.isfile(args.font) or not access(args.font, R_OK):
662            print >> sys.stderr, ("Error: Font file (%s) can't be opened"
663                    % (args.font))
664            exit(1)
665 
666    if args.icon == [ "ALL" ]:
667        # Export all icons
668        selected_icons = sorted(icons.keys())
669    else:
670        selected_icons = []
671 
672        # Icon name was given
673        for icon in args.icon:
674            # Strip the "icon-" prefix, if present
675            if icon.startswith("icon-"):
676                icon = icon[5:]
677 
678            if icon in icons:
679                selected_icons.append(icon)
680            else:
681                print >> sys.stderr, "Error: Unknown icon name (%s)" % (icon)
682                sys.exit(1)
683 
684    for icon in selected_icons:
685        if len(selected_icons) > 1:
686            # Exporting multiple icons -- treat the filename option as name prefix
687            filename = (args.filename or "") + icon + ".png"
688        else:
689            # Exporting one icon
690            if args.filename:
691                filename = args.filename
692            else:
693                filename = icon + ".png"
694 
695        print("Exporting icon \"%s\" as %s (%ix%i pixels)" %
696                (icon, filename, size, size))
697 
698        export_icon(icon, size, filename, font, color)

　帮助文档 README.md：

01Font Awesome to PNG
02===================
03 
04This program allows you to extract the awesome
05[Font Awesome] (http://fortawesome.github.com/Font-Awesome/) icons as PNG images
06of specified size.
07 
08### Usage
09 
10    font-awesome-to-png.py [-h] [--color COLOR] [--filename FILENAME]
11                           [--font FONT] [--css CSS] [--list] [--size SIZE]
12                           icon [icon ...]
13 
14    positional arguments:
15      icon                 The name(s) of the icon(s) to export (or "ALL" for
16                           all icons)
17 
18    optional arguments:
19      --color COLOR        Color (HTML color code or name, default: black)
20      --filename FILENAME  The name of the output file (it must end with
21                           ".png"). If all files are exported, it is used as a
22                           prefix.
23      --font FONT          Font file to use (default: fontawesome-webfont.ttf)
24      --css CSS            Path to the CSS file defining icon names (instead of
25                           the predefined list)
26      --list               List available icon names and exit
27      --size SIZE          Icon size in pixels (default: 16)
28 
29    hidden optional arguments:
30     --list-update         List available icon names and codes in format suitable
31                           for updating the program source.
32 
33To use the program, you need the Font Awesome TTF file, which is available in
34[Font Awesome Github repository] (https://github.com/FortAwesome/Font-Awesome).
35 
36The internal icon list is matched to Font Awesome 4.1.0.  To use a later/different
37version, use font-awesome.css from the Font Awesome GitHub repository.
38 
39### Examples
40 
41Export the "play" and "stop" icons as 24x24 pixels images:
42 
43    font-awesome-to-png.py --size 24 play stop
44 
45Export the asterisk icon as 32x32 pixels image, in blue:
46 
47    font-awesome-to-png.py --size 32 --color blue asterisk
48 
49Export all icons as 16x16 pixels images:
50 
51    font-awesome-to-png.py ALL

如何将 Font Awesome 转成 PNG 图标 详细教程 含源代码

如何将 Font Awesome 转成 PNG 图标详细教程含源代码