Qt第六十二章：图标库QtAwesome的使用

你的名字 2024-03-23 11:42 63阅读 0赞

**目录**

一、安装依赖

二、主页

三、文档

四、案例

1、图标

2、样式

3、alpha 通道

4、 多图标堆叠

5、动画

6、字体

五、系列

1、msc系列

2、fa5系列（选择free栏）

3、fa5s系列（选择free栏）

4、fa5b系列（选择free栏）

5、fa系列

6、ei系列

7、mdi系列

8、mdi6系列

9、ph系列

10、ri系列

--------------------

### 一、安装依赖 ###

pip install QtAwesome

![5be6356e2ee74a439ec4109ce9e63494.png][]

### 二、主页 ###

[GitHub - spyder-ide/qtawesome: Iconic fonts in PyQt and PySide applicationsIconic fonts in PyQt and PySide applications. Contribute to spyder-ide/qtawesome development by creating an account on GitHub.![fluidicon.png][]https://github.com/spyder-ide/qtawesome][GitHub - spyder-ide_qtawesome_ Iconic fonts in PyQt and PySide applicationsIconic fonts in PyQt and PySide applications. Contribute to spyder-ide_qtawesome development by creating an account on GitHub._fluidicon.png_https_github.com_spyder-ide_qtawesome]

### 三、文档 ###

[Usage — qtawesome 1.3.0.dev0 documentation![icon-default.png_t_N2N8][]https://qtawesome.readthedocs.io/en/latest/usage.html][Usage _ qtawesome 1.3.0.dev0 documentation_icon-default.png_t_N2N8_https_qtawesome.readthedocs.io_en_latest_usage.html]

### 四、案例 ###

以msc系列为例

#### 1、图标 ####

![aa498ccfab0d4d99b7418c4c0311a180.png][]

#### 2、样式 ####

**color** 常态时的颜色  
**color\_off、color\_off\_active、color\_on、color\_on\_active**  
**offset**  
**active**、**color\_active** 激活时的图标和颜色  
**disabled**、**color\_disabled** 禁用时的图标和颜色  
**selected**、**color\_selected** 选中时的图标和颜色  
**scale\_factor** 缩放  
**opacity** 透明度

![656e4fa661f64669882b0856d8d37838.png][]

#### 3、alpha 通道 ####

![9481dcae09884f439f4f0fba82c1980c.png][]

#### 4、 多图标堆叠 ####

![e7965cb8fda840d4a433ad8b0ca9fe1a.png][]

#### 5、动画 ####

![e1915bf53bab430ebd1dfc9242a1cc1b.png][]

#### 6、字体 ####

#### ![349281a58d314441b3d784bdfc24be56.png][] ####

### 五、系列 ###

以下有10个系列，不同的系列以不同的**前缀进行标识**。

#### 1、msc系列 ####

[codicon | The icon font for Visual Studio Code][codicon _ The icon font for Visual Studio Code]

#### 2、fa5系列（选择free栏） ####

[Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome][Find the Perfect Icon for Your Project in Font Awesome 5 _ Font Awesome]

#### 3、fa5s系列（选择free栏） ####

[Solid style in Version 5 | Font Awesome][Solid style in Version 5 _ Font Awesome]

#### 4、fa5b系列（选择free栏）   [Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome][Find the Perfect Icon for Your Project in Font Awesome 5 _ Font Awesome 1] ####

#### 5、fa系列 ####

[Font Awesome Icons][]

#### 6、ei系列 ####

[Elusive Icons Icons][]

#### 7、mdi系列 ####

[Material Design Icons - Icon Library - Pictogrammers][]

#### 8、mdi6系列 ####

[Material Design Icons - Icon Library - Pictogrammers][]

#### 9、ph系列 ####

[Phosphor Icons][]

#### 10、ri系列 ####

[Remix Icon - Open source icon library][]

[5be6356e2ee74a439ec4109ce9e63494.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/84f2cb1fe7194a2691464ca8397c58e7.png
[fluidicon.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ac98b62b5db34ec083a870d9ecbbd879.png
[GitHub - spyder-ide_qtawesome_ Iconic fonts in PyQt and PySide applicationsIconic fonts in PyQt and PySide applications. Contribute to spyder-ide_qtawesome development by creating an account on GitHub._fluidicon.png_https_github.com_spyder-ide_qtawesome]: https://github.com/spyder-ide/qtawesome
[icon-default.png_t_N2N8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ad83f2c7fbb142ed8440577251166569.png
[Usage _ qtawesome 1.3.0.dev0 documentation_icon-default.png_t_N2N8_https_qtawesome.readthedocs.io_en_latest_usage.html]: https://qtawesome.readthedocs.io/en/latest/usage.html
[aa498ccfab0d4d99b7418c4c0311a180.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ce966ee241914e54a2dd2bda5d4b03a9.png
[656e4fa661f64669882b0856d8d37838.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/0c698137c59e4b519e6159b1a4b54da1.png
[9481dcae09884f439f4f0fba82c1980c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/2a4a7dbabda94e009e20339c67513669.png
[e7965cb8fda840d4a433ad8b0ca9fe1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/f15e25c9384247229f5f63dd52b12924.png
[e1915bf53bab430ebd1dfc9242a1cc1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3e5d9f0d7cf7485eac3f6b47ffb551d9.png
[349281a58d314441b3d784bdfc24be56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/822ea473b896466dae56941dfd9a776f.png
[codicon _ The icon font for Visual Studio Code]: https://microsoft.github.io/vscode-codicons/dist/codicon.html
[Find the Perfect Icon for Your Project in Font Awesome 5 _ Font Awesome]: https://fontawesome.com/v5/search?p=1
[Solid style in Version 5 _ Font Awesome]: https://fontawesome.com/v5/search?o=r&m=free&s=solid
[Find the Perfect Icon for Your Project in Font Awesome 5 _ Font Awesome 1]: https://fontawesome.com/v5/search?o=r&m=free&f=brands
[Font Awesome Icons]: https://fontawesome.com/v4/icons/
[Elusive Icons Icons]: http://elusiveicons.com/icons/
[Material Design Icons - Icon Library - Pictogrammers]: https://pictogrammers.com/library/mdi/
[Phosphor Icons]: https://phosphoricons.com/
[Remix Icon - Open source icon library]: https://remixicon.com/