实际开发中，uniapp 提供的官方图标实际上已经不满足开发的需求了。如若有更多矢量图标的需求，就得导入第三方图标了
导入图标
推荐使用 阿里图标库 https://www.iconfont.cn/
下载到本地后，将所有文件解压，得到一些文件
微信截图_20230627093935.png
把它们放置在 uniapp 项目根目录的
/common 文件夹中 (实际放哪都行)，这个时候，我们得修改一下主文件 iconfont.css 的引入
这是原来的
@font-face {
font-family: "iconfont"; /* Project id 4139590 */
src: url('iconfont.woff2?t=1687826619189') format('woff2'),
url('iconfont.woff?t=1687826619189') format('woff'),
url('iconfont.ttf?t=1687826619189') format('truetype');
}
...
这是修改后
@font-face {
font-family: "iconfont"; /* Project id 4139590 */
src: url('@/common/iconfont.woff2?t=1687826619189') format('woff2'),
url('@/common/iconfont.woff?t=1687826619189') format('woff'),
url('@/common/iconfont.ttf?t=1687826619189') format('truetype');
}
...
然后在需要导入图标的页面的 <style> 中 import 一下就可以使用了
<style>
@import "@/common/iconfont.css";
...
</style>
若想设置全局，直接在全局CSS样式中导入即可 （一般在根目录）
效果展示
该导入图标的方式是多端兼容的
效果展示
