在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】这个文件中的相关内容。
图标名称和图片的对应可以查看FontAwesome官网
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，别忘了了解一下【使用协议】。
