在Qt中使用Font Awesome图标

做过Web前端开发的一定对Font Awesome不会陌生，Font Awesome号称是为Bootstrap设计的完美图标字体，经常出现在各类网页中，非常流行。

这么好的资源，能不能在Qt应用程序中使用呢？答案是肯定的。而且使用起来非常简单。

1. 先来了解下 Font Awesome 的一些特性：

更多关于Font Awesome可以前往其官网【了解详情】。

2. 下载 Font Awesome（本示例使用的是Font-Awesome-3.2.1版）

解压后得到的文件如下：

【font】目录下的【fontawesome-webfont.ttf】为我们需要的文件，其他文件暂时先忽略。

3. 创建一个Qt项目，并将字体文件【fontawesome-webfont.ttf】添加到项目资源中

4.接下来，先编写一个帮助类，帮助我们更方便的使用FontAwesome

  1 // fontawesomeicons.h
  2 #ifndef FONTAWESOMEICONS_H
  3 #define FONTAWESOMEICONS_H
  4
  5 #include <QFont>
  6 #include <QChar>
  7
  8 class FontAwesomeIcons
  9 {
 10 public:
 11     /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 12        readers do not read off random characters that represent icons */
 13     enum class IconIdentity : int{
 14         icon_glass=0xf000,
 15         icon_music=0xf001,
 16         icon_search=0xf002,
 17         icon_envelope_alt=0xf003,
 18         icon_heart=0xf004,
 19         icon_star=0xf005,
 20         icon_star_empty=0xf006,
 21         icon_user=0xf007,
 22         icon_film=0xf008,
 23         icon_th_large=0xf009,
 24         icon_th=0xf00a,
 25         icon_th_list=0xf00b,
 26         icon_ok=0xf00c,
 27         icon_remove=0xf00d,
 28         icon_zoom_in=0xf00e,
 29         icon_zoom_out=0xf010,
 30         icon_power_off=0xf011,
 31         icon_off=icon_power_off,
 32         icon_signal=0xf012,
 33         icon_gear=0xf013,
 34         icon_cog=icon_gear,
 35         icon_trash=0xf014,
 36         icon_home=0xf015,
 37         icon_file_alt=0xf016,
 38         icon_time=0xf017,
 39         icon_road=0xf018,
 40         icon_download_alt=0xf019,
 41         icon_download=0xf01a,
 42         icon_upload=0xf01b,
 43         icon_inbox=0xf01c,
 44         icon_play_circle=0xf01d,
 45         icon_rotate_right=0xf01e,
 46         icon_repeat=icon_rotate_right,
 47         icon_refresh=0xf021,
 48         icon_list_alt=0xf022,
 49         icon_lock=0xf023,
 50         icon_flag=0xf024,
 51         icon_headphones=0xf025,
 52         icon_volume_off=0xf026,
 53         icon_volume_down=0xf027,
 54         icon_volume_up=0xf028,
 55         icon_qrcode=0xf029,
 56         icon_barcode=0xf02a,
 57         icon_tag=0xf02b,
 58         icon_tags=0xf02c,
 59         icon_book=0xf02d,
 60         icon_bookmark=0xf02e,
 61         icon_print=0xf02f,
 62         icon_camera=0xf030,
 63         icon_font=0xf031,
 64         icon_bold=0xf032,
 65         icon_italic=0xf033,
 66         icon_text_height=0xf034,
 67         icon_text_width=0xf035,
 68         icon_align_left=0xf036,
 69         icon_align_center=0xf037,
 70         icon_align_right=0xf038,
 71         icon_align_justify=0xf039,
 72         icon_list=0xf03a,
 73         icon_indent_left=0xf03b,
 74         icon_indent_right=0xf03c,
 75         icon_facetime_video=0xf03d,
 76         icon_picture=0xf03e,
 77         icon_pencil=0xf040,
 78         icon_map_marker=0xf041,
 79         icon_adjust=0xf042,
 80         icon_tint=0xf043,
 81         icon_edit=0xf044,
 82         icon_share=0xf045,
 83         icon_check=0xf046,
 84         icon_move=0xf047,
 85         icon_step_backward=0xf048,
 86         icon_fast_backward=0xf049,
 87         icon_backward=0xf04a,
 88         icon_play=0xf04b,
 89         icon_pause=0xf04c,
 90         icon_stop=0xf04d,
 91         icon_forward=0xf04e,
 92         icon_fast_forward=0xf050,
 93         icon_step_forward=0xf051,
 94         icon_eject=0xf052,
 95         icon_chevron_left=0xf053,
 96         icon_chevron_right=0xf054,
 97         icon_plus_sign=0xf055,
 98         icon_minus_sign=0xf056,
 99         icon_remove_sign=0xf057,
100         icon_ok_sign=0xf058,
101         icon_question_sign=0xf059,
102         icon_info_sign=0xf05a,
103         icon_screenshot=0xf05b,
104         icon_remove_circle=0xf05c,
105         icon_ok_circle=0xf05d,
106         icon_ban_circle=0xf05e,
107         icon_arrow_left=0xf060,
108         icon_arrow_right=0xf061,
109         icon_arrow_up=0xf062,
110         icon_arrow_down=0xf063,
111         icon_mail_forward=0xf064,
112         icon_share_alt=icon_mail_forward,
113         icon_resize_full=0xf065,
114         icon_resize_small=0xf066,
115         icon_plus=0xf067,
116         icon_minus=0xf068,
117         icon_asterisk=0xf069,
118         icon_exclamation_sign=0xf06a,
119         icon_gift=0xf06b,
120         icon_leaf=0xf06c,
121         icon_fire=0xf06d,
122         icon_eye_open=0xf06e,
123         icon_eye_close=0xf070,
124         icon_warning_sign=0xf071,
125         icon_plane=0xf072,
126         icon_calendar=0xf073,
127         icon_random=0xf074,
128         icon_comment=0xf075,
129         icon_magnet=0xf076,
130         icon_chevron_up=0xf077,
131         icon_chevron_down=0xf078,
132         icon_retweet=0xf079,
133         icon_shopping_cart=0xf07a,
134         icon_folder_close=0xf07b,
135         icon_folder_open=0xf07c,
136         icon_resize_vertical=0xf07d,
137         icon_resize_horizontal=0xf07e,
138         icon_bar_chart=0xf080,
139         icon_twitter_sign=0xf081,
140         icon_facebook_sign=0xf082,
141         icon_camera_retro=0xf083,
142         icon_key=0xf084,
143         icon_gears=0xf085,
144         icon_cogs=icon_gears,
145         icon_comments=0xf086,
146         icon_thumbs_up_alt=0xf087,
147         icon_thumbs_down_alt=0xf088,
148         icon_star_half=0xf089,
149         icon_heart_empty=0xf08a,
150         icon_signout=0xf08b,
151         icon_linkedin_sign=0xf08c,
152         icon_pushpin=0xf08d,
153         icon_external_link=0xf08e,
154         icon_signin=0xf090,
155         icon_trophy=0xf091,
156         icon_github_sign=0xf092,
157         icon_upload_alt=0xf093,
158         icon_lemon=0xf094,
159         icon_phone=0xf095,
160         icon_unchecked=0xf096,
161         icon_check_empty=icon_unchecked,
162         icon_bookmark_empty=0xf097,
163         icon_phone_sign=0xf098,
164         icon_twitter=0xf099,
165         icon_facebook=0xf09a,
166         icon_github=0xf09b,
167         icon_unlock=0xf09c,
168         icon_credit_card=0xf09d,
169         icon_rss=0xf09e,
170         icon_hdd=0xf0a0,
171         icon_bullhorn=0xf0a1,
172         icon_bell=0xf0a2,
173         icon_certificate=0xf0a3,
174         icon_hand_right=0xf0a4,
175         icon_hand_left=0xf0a5,
176         icon_hand_up=0xf0a6,
177         icon_hand_down=0xf0a7,
178         icon_circle_arrow_left=0xf0a8,
179         icon_circle_arrow_right=0xf0a9,
180         icon_circle_arrow_up=0xf0aa,
181         icon_circle_arrow_down=0xf0ab,
182         icon_globe=0xf0ac,
183         icon_wrench=0xf0ad,
184         icon_tasks=0xf0ae,
185         icon_filter=0xf0b0,
186         icon_briefcase=0xf0b1,
187         icon_fullscreen=0xf0b2,
188         icon_group=0xf0c0,
189         icon_link=0xf0c1,
190         icon_cloud=0xf0c2,
191         icon_beaker=0xf0c3,
192         icon_cut=0xf0c4,
193         icon_copy=0xf0c5,
194         icon_paperclip=0xf0c6,
195         icon_paper_clip=icon_paperclip,
196         icon_save=0xf0c7,
197         icon_sign_blank=0xf0c8,
198         icon_reorder=0xf0c9,
199         icon_list_ul=0xf0ca,
200         icon_list_ol=0xf0cb,
201         icon_strikethrough=0xf0cc,
202         icon_underline=0xf0cd,
203         icon_table=0xf0ce,
204         icon_magic=0xf0d0,
205         icon_truck=0xf0d1,
206         icon_pinterest=0xf0d2,
207         icon_pinterest_sign=0xf0d3,
208         icon_google_plus_sign=0xf0d4,
209         icon_google_plus=0xf0d5,
210         icon_money=0xf0d6,
211         icon_caret_down=0xf0d7,
212         icon_caret_up=0xf0d8,
213         icon_caret_left=0xf0d9,
214         icon_caret_right=0xf0da,
215         icon_columns=0xf0db,
216         icon_sort=0xf0dc,
217         icon_sort_down=0xf0dd,
218         icon_sort_up=0xf0de,
219         icon_envelope=0xf0e0,
220         icon_linkedin=0xf0e1,
221         icon_rotate_left=0xf0e2,
222         icon_undo=icon_rotate_left,
223         icon_legal=0xf0e3,
224         icon_dashboard=0xf0e4,
225         icon_comment_alt=0xf0e5,
226         icon_comments_alt=0xf0e6,
227         icon_bolt=0xf0e7,
228         icon_sitemap=0xf0e8,
229         icon_umbrella=0xf0e9,
230         icon_paste=0xf0ea,
231         icon_lightbulb=0xf0eb,
232         icon_exchange=0xf0ec,
233         icon_cloud_download=0xf0ed,
234         icon_cloud_upload=0xf0ee,
235         icon_user_md=0xf0f0,
236         icon_stethoscope=0xf0f1,
237         icon_suitcase=0xf0f2,
238         icon_bell_alt=0xf0f3,
239         icon_coffee=0xf0f4,
240         icon_food=0xf0f5,
241         icon_file_text_alt=0xf0f6,
242         icon_building=0xf0f7,
243         icon_hospital=0xf0f8,
244         icon_ambulance=0xf0f9,
245         icon_medkit=0xf0fa,
246         icon_fighter_jet=0xf0fb,
247         icon_beer=0xf0fc,
248         icon_h_sign=0xf0fd,
249         icon_plus_sign_alt=0xf0fe,
250         icon_double_angle_left=0xf100,
251         icon_double_angle_right=0xf101,
252         icon_double_angle_up=0xf102,
253         icon_double_angle_down=0xf103,
254         icon_angle_left=0xf104,
255         icon_angle_right=0xf105,
256         icon_angle_up=0xf106,
257         icon_angle_down=0xf107,
258         icon_desktop=0xf108,
259         icon_laptop=0xf109,
260         icon_tablet=0xf10a,
261         icon_mobile_phone=0xf10b,
262         icon_circle_blank=0xf10c,
263         icon_quote_left=0xf10d,
264         icon_quote_right=0xf10e,
265         icon_spinner=0xf110,
266         icon_circle=0xf111,
267         icon_mail_reply=0xf112,
268         icon_reply=icon_mail_reply,
269         icon_github_alt=0xf113,
270         icon_folder_close_alt=0xf114,
271         icon_folder_open_alt=0xf115,
272         icon_expand_alt=0xf116,
273         icon_collapse_alt=0xf117,
274         icon_smile=0xf118,
275         icon_frown=0xf119,
276         icon_meh=0xf11a,
277         icon_gamepad=0xf11b,
278         icon_keyboard=0xf11c,
279         icon_flag_alt=0xf11d,
280         icon_flag_checkered=0xf11e,
281         icon_terminal=0xf120,
282         icon_code=0xf121,
283         icon_reply_all=0xf122,
284         icon_mail_reply_all=0xf122,
285         icon_star_half_full=0xf123,
286         icon_star_half_empty=icon_star_half_full,
287         icon_location_arrow=0xf124,
288         icon_crop=0xf125,
289         icon_code_fork=0xf126,
290         icon_unlink=0xf127,
291         icon_question=0xf128,
292         icon_info=0xf129,
293         icon_exclamation=0xf12a,
294         icon_superscript=0xf12b,
295         icon_subscript=0xf12c,
296         icon_eraser=0xf12d,
297         icon_puzzle_piece=0xf12e,
298         icon_microphone=0xf130,
299         icon_microphone_off=0xf131,
300         icon_shield=0xf132,
301         icon_calendar_empty=0xf133,
302         icon_fire_extinguisher=0xf134,
303         icon_rocket=0xf135,
304         icon_maxcdn=0xf136,
305         icon_chevron_sign_left=0xf137,
306         icon_chevron_sign_right=0xf138,
307         icon_chevron_sign_up=0xf139,
308         icon_chevron_sign_down=0xf13a,
309         icon_html5=0xf13b,
310         icon_css3=0xf13c,
311         icon_anchor=0xf13d,
312         icon_unlock_alt=0xf13e,
313         icon_bullseye=0xf140,
314         icon_ellipsis_horizontal=0xf141,
315         icon_ellipsis_vertical=0xf142,
316         icon_rss_sign=0xf143,
317         icon_play_sign=0xf144,
318         icon_ticket=0xf145,
319         icon_minus_sign_alt=0xf146,
320         icon_check_minus=0xf147,
321         icon_level_up=0xf148,
322         icon_level_down=0xf149,
323         icon_check_sign=0xf14a,
324         icon_edit_sign=0xf14b,
325         icon_external_link_sign=0xf14c,
326         icon_share_sign=0xf14d,
327         icon_compass=0xf14e,
328         icon_collapse=0xf150,
329         icon_collapse_top=0xf151,
330         icon_expand=0xf152,
331         icon_euro=0xf153,
332         icon_eur=icon_euro,
333         icon_gbp=0xf154,
334         icon_dollar=0xf155,
335         icon_usd=icon_dollar,
336         icon_rupee=0xf156,
337         icon_inr=icon_rupee,
338         icon_yen=0xf157,
339         icon_jpy=icon_yen,
340         icon_renminbi=0xf158,
341         icon_cny=icon_renminbi,
342         icon_won=0xf159,
343         icon_krw=icon_won,
344         icon_bitcoin=0xf15a,
345         icon_btc=icon_bitcoin,
346         icon_file=0xf15b,
347         icon_file_text=0xf15c,
348         icon_sort_by_alphabet=0xf15d,
349         icon_sort_by_alphabet_alt=0xf15e,
350         icon_sort_by_attributes=0xf160,
351         icon_sort_by_attributes_alt=0xf161,
352         icon_sort_by_order=0xf162,
353         icon_sort_by_order_alt=0xf163,
354         icon_thumbs_up=0xf164,
355         icon_thumbs_down=0xf165,
356         icon_youtube_sign=0xf166,
357         icon_youtube=0xf167,
358         icon_xing=0xf168,
359         icon_xing_sign=0xf169,
360         icon_youtube_play=0xf16a,
361         icon_dropbox=0xf16b,
362         icon_stackexchange=0xf16c,
363         icon_instagram=0xf16d,
364         icon_flickr=0xf16e,
365         icon_adn=0xf170,
366         icon_bitbucket=0xf171,
367         icon_bitbucket_sign=0xf172,
368         icon_tumblr=0xf173,
369         icon_tumblr_sign=0xf174,
370         icon_long_arrow_down=0xf175,
371         icon_long_arrow_up=0xf176,
372         icon_long_arrow_left=0xf177,
373         icon_long_arrow_right=0xf178,
374         icon_apple=0xf179,
375         icon_windows=0xf17a,
376         icon_android=0xf17b,
377         icon_linux=0xf17c,
378         icon_dribbble=0xf17d,
379         icon_skype=0xf17e,
380         icon_foursquare=0xf180,
381         icon_trello=0xf181,
382         icon_female=0xf182,
383         icon_male=0xf183,
384         icon_gittip=0xf184,
385         icon_sun=0xf185,
386         icon_moon=0xf186,
387         icon_archive=0xf187,
388         icon_bug=0xf188,
389         icon_vk=0xf189,
390         icon_weibo=0xf18a,
391         icon_renren=0xf18b
392     };
393
394 public:
395     static FontAwesomeIcons& Instance();
396
397     QFont getFont();
398
399     QChar getIconChar(FontAwesomeIcons::IconIdentity code);
400
401 protected:
402     FontAwesomeIcons();
403
404     FontAwesomeIcons(const FontAwesomeIcons& fai) = delete;
405     FontAwesomeIcons& operator=(const FontAwesomeIcons& fai) = delete;
406
407 private:
408     QFont font;
409 };
410
411 #endif // FONTAWESOMEICONS_H

 1 // fontawesomeicons.cpp
 2 #include "fontawesomeicons.h"
 3 #include <QFontDatabase>
 4
 5 FontAwesomeIcons &FontAwesomeIcons::Instance()
 6 {
 7     static FontAwesomeIcons _instance;
 8     return _instance;
 9 }
10
11 QFont FontAwesomeIcons::getFont()
12 {
13     return this->font;
14 }
15
16 QChar FontAwesomeIcons::getIconChar(FontAwesomeIcons::IconIdentity code)
17 {
18     return QChar((int)code);
19 }
20
21 FontAwesomeIcons::FontAwesomeIcons()
22 {
23     // add font file
24     int fontId = QFontDatabase::addApplicationFont(":/font/fontawesome-webfont.ttf");
25     QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
26
27     Q_ASSERT_X(fontFamilies.size()==1,"font","font not exist.");
28
29     this->font.setFamily(fontFamilies.at(0));
30 }

说明：

这个类有两个作用：一是加载字体；二是将图标名称定义成枚举，方便后面使用。

关于图标名称的定义，可以查看【font-awesome.css】这个文件中的相关内容。

5. 在主窗口中使用FontAwesome字体显示图标

 1 // mainwindow.h
 2 #ifndef MAINWINDOW_H
 3 #define MAINWINDOW_H
 4
 5 #include <QMainWindow>
 6 #include <QFont>
 7
 8 namespace Ui {
 9 class MainWindow;
10 }
11
12 class MainWindow : public QMainWindow
13 {
14     Q_OBJECT
15
16 public:
17     explicit MainWindow(QWidget *parent = 0);
18     ~MainWindow();
19
20 private:
21     Ui::MainWindow *ui;
22     QFont font;
23
24     // QWidget interface
25 protected:
26     virtual void paintEvent(QPaintEvent *event);
27 };
28
29 #endif // MAINWINDOW_H

使用FontAwesome字体

1 MainWindow::MainWindow(QWidget *parent) :
2     QMainWindow(parent),
3     ui(new Ui::MainWindow),
4     font(FontAwesomeIcons::Instance().getFont())
5 {
6     ui->setupUi(this);
7     this->font.setPointSize(16);
8 }

在paintEvent中绘制字体图标

 1 void MainWindow::paintEvent(QPaintEvent *event)
 2 {
 3     Q_UNUSED(event);
 4
 5     QPainter painter(this);
 6     painter.setPen(QColor("#000000"));
 7     painter.setFont(this->font);
 8
 9     painter.drawText(10,30, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_android));
10     painter.drawText(30,30, "icon_android");
11
12     painter.drawText(200,30, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_desktop));
13     painter.drawText(230,30, "icon_desktop");
14
15     painter.drawText(10,70, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_user));
16     painter.drawText(30,70, "icon_user");
17
18     painter.drawText(200,70, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_github));
19     painter.drawText(230,70, "icon_github");
20
21     painter.drawText(10,110, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_circle));
22     painter.drawText(30,110, "icon_circle");
23
24     painter.drawText(200,110, FontAwesomeIcons::Instance().getIconChar(FontAwesomeIcons::IconIdentity::icon_circle_blank));
25     painter.drawText(230,110, "icon_circle_blank");
26
27 }

6.最终完成效果如下图所示

完整示例程序下载：【在这里】

7.注意事项，如果在正式项目中使用Font Awesome，别忘了了解一下【使用协议】。