做过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，别忘了了解一下【使用协议】。
时间： 2024-07-31 22:10:12