zoukankan      html  css  js  c++  java
  • 在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,别忘了了解一下【使用协议】。

  • 相关阅读:
    win10打开相机提示我们找不到你的相机
    Potplay视频播放画面扭曲
    SIFT特征匹配算法介绍
    SelectiveSearchCodeIJCV遇到First two input arguments should have the same 2D dimension
    mybatis逆向工程mvn插件
    ssm配置
    springmvc配置
    MyBatis如何禁用掉一级缓存
    Mybatis中#{}和${}的区别
    Java demo之IO
  • 原文地址:https://www.cnblogs.com/pyw0818/p/8052047.html
Copyright © 2011-2022 走看看