uni-app使用字体图标

偏执的太偏执、 2023-02-25 08:34 27阅读 0赞

第一种方式：

https://www.iconfont.cn/  阿里图标

输入插件名称，例如search,选择图标加入购物车，添加到项目中，生成代码，复制网址，前面加上https:，得到了一篇样式，复制，项目下新建common目录，新建css文件夹，新建css文件，把刚才的代码复制过来，在自己需要的页面中引入css文件，记得删除url,在元素前面加上，.iconfont .icon-search这两个类即可。

第二种方式：使用uni-app组件,https://ext.dcloud.net.cn/  插件市场，下载Icon

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIyNTUw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIyNTUw_size_16_color_FFFFFF_t_70 1][]![20200711133508507.png][]

使用HBuilderx导入插件，可以在插件预览地址查看图标类型，

使用uni-icons组件，即可使用。

<uni-icons type="contact" size="30"></uni-icons>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIyNTUw_size_16_color_FFFFFF_t_70]: /images/20230209/96abadc2a2ec4bc49e98bf62dfa6c92d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIyNTUw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200711133402260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzIyNTUw,size_16,color_FFFFFF,t_70
[20200711133508507.png]: /images/20230209/aa7079e3be544115a6820be7a19f6feb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 iconfont 字体图标

<i class="iconfont icon-home"></i> 使用时只需要添加class=“iconfont icon-xxx”，xxx可以去阿里巴巴矢量...

迈不过友情╰/ 2024年04月19日 14:58/ 0 赞/ 111 阅读

相关 uniapp使用字体图标

1.在阿里图标库下载需要的字体图标，选择好图标后点下载代码 [iconfont-阿里巴巴矢量图标库][iconfont-] 2.将下载的压缩包里面的ttf文件拷贝到unia

淩亂°似流年/ 2023年10月02日 17:09/ 0 赞/ 45 阅读

相关 uniapp中使用字体图标

从阿里图标库中下载，并放入项目中 ![20200412175328195.png][] 打开iconfont.css，添加~@/static/iconfont。注意：圈起来

谁借莪１个温暖的怀抱￠/ 2023年07月24日 14:47/ 0 赞/ 71 阅读

相关 uniapp nvue三步使用阿里字体图标

第一步：复制unicode码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

系统管理员/ 2022年12月20日 11:09/ 0 赞/ 506 阅读

相关 uniapp项目如何使用字体图标

第一步，把font文件放到static文件夹下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

快来打我*/ 2022年10月23日 11:12/ 0 赞/ 304 阅读

相关 Nvue引入字体图标、subNvue使用字体图标

如何在使用nvue或subNvue时添加字体图标库（线上地址） > 在nvue中使用字体图标在解决APP端使用`video`标签时，需要使用到`subNvue`原生子

傷城~/ 2021年10月06日 18:50/ 0 赞/ 1021 阅读

相关 uniapp-字体图标使用-解决字体图标无法正常显示（IOS显示正文形/问号）

前言：字体图标常用到的是阿里的iconfont，阿里的iconfont在IOS默认显示的基本是没有问题的，但是有时候图标显示不正常，比如：显示正方形、或者问号。在buttons

柔光的暖阳◎/ 2021年07月24日 19:57/ 0 赞/ 1999 阅读

相关字体图标的使用

引入文件夹 ![在这里插入图片描述][20191225093728745.png] ![在这里插入图片描述][20191225093709631.png] [201

秒速五厘米/ 2021年07月24日 15:50/ 0 赞/ 489 阅读

相关 uniapp使用iconfont字体图标

情景1：使用灰色的字体图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

た入场券/ 2021年07月24日 13:40/ 1 赞/ 759 阅读

相关 uniapp css样式、引入阿里字体图标、使用less、scss

css样式选择器无效 page相当于body选择器 1rpx=0.5px 导入其他css文件

电玩女神/ 2021年07月24日 12:19/ 0 赞/ 967 阅读