uView自定义图标和普通引入图标（iconfont-阿里巴巴图标库）

停留的章小鱼

已于 2023-10-10 14:02:59 修改

阅读量3k

点赞数 6

文章标签： java 前端 javascript

于 2023-10-10 13:21:32 首次发布

本文链接：https://blog.csdn.net/2201_75870706/article/details/133743038

版权

uView官方自定义图标的添加方法：

CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

对比修改步骤：

1、修改图标的前缀打开项目设置

2、修改"FontClass/Symbol 前缀"项为"custom-icon-"，修改"Font Family"为"custom-icon"，如下图：

3、下载项目至本地

4、引入项目：

4.1、快速引入：框里的四个文件复制到项目中（本案例：根目录下/static/iconfont文件夹下）

修改iconfont.css:

样式.custom-icon适用于普通引入使用iconfont

样式.custom-icon-适用于uView自定义图标使用iconfont

在项目根目录的"App.vue"中，引入上述的"iconfont.css"

@import "@/static/iconfont/iconfont.css";//路径保证正确

页面使用:

//普通使用iconfont
<i class="custom-icon custom-icon-company-fill" style="font-size: 30px; color: #888;"></i>
//uView自定义iconfon
<u-icon custom-prefix="custom-icon-company-fill custom-icon" size="30" color="#888"></u-icon>

效果图：两种方式效果一样

uview写法原理借鉴：解决uView添加自定义图标不成功_uview 1.0 right-icon-style-CSDN博客

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

停留的章小鱼

关注关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
7
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uview2.0 如何自定义图标

weixin_44179923的博客

12-12

3194

首先去iconfont这个网站添加自己想要的图标，然后下载下来把ttf文件放到根目录 static/iconfont.ttf 把css放到根目录的common/iconfont.css 打开App.vue 文件修改成下面 <script> export default { onLaunch: function() { // #ifndef MP const domModule = weex.requireModule('dom') domModule.add.

uView 扩展图标(使用阿里iconfont图标)

weixin_47218793的博客

09-29

3558

uView引用阿里图标步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理-----我的项目 4.点击项目设置,配置图标前缀(Font Family名称比FontClass/Symbol前缀少一个 - ) ,保存 5.点击下载本地,把下载的文件解压 6.在uniapp项目根目录新建一个文件夹(我的叫common/cs...

7 条评论您还未登录，请先登录后发表或查看评论

uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水.zip

04-03

uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水.zip

uView 2.0使用自定义iconfont图标

baidu_37302589的博客

05-16

5014

view2.0暂不支持使用自定义图标，只能通过修改源码去实现实现后的效果如下 1、先去图标库选择想要的icon加入项目，再生成代码 2、再点击下载代码，解压后如下 3、编写test.js文件，并通过 node test.js 执行 let path1 = "./iconfont.json"; let fs = require('fs'); const path = require('path'); let plays = JSON.parse(fs.readFileSync(path1)); co

解决uView2.0离线状态下icon图标不显示的问题

最新发布

m0_59415345的博客

07-17

1200

在uniapp + uView的项目中，在web端、模拟器端都显示正常，但是在真机，内网环境，不能访问外网的环境下运行时，icon图标就无法显示，很明显，原因肯定跟网络有关，于是乎去看了一下uView的源码，发现在uview-ui/components/u-icon/u-icon.vue有一个引入在线的阿里巴巴iconfont的url，因此需要将这个远端ttf字体文件改为本地能够获取到的数据。

u-view2.0 引入iconfont（阿里字体图标库）详细步骤！

柑橘乌云_

04-10

2265

uView已通过大量的实践中，收集了用户最有可能需要用到的图标，见，但我们也相信，它肯定无法覆盖所有的场景和需求。用户也可以使用标签的方式，自行引入字体图标，为何要通过扩展的方式集成呢？这是因为uView有统一的字体图标组件，使用方便，配置灵活，且风格统一。通过如下方式引用：通过指定类名为。

uView——uview 自定义 u-icon 图标大小

qq_43201350的博客

01-04

1102

uView——uview 自定义 u-icon 图标大小

使用uview框架的icon组件之扩展自定义图标库

weixin_44168109的博客

01-26

6190

uView已经有很多图标，但也没办法满足我们所有的需求。此时，我们就需要自己扩展图标库。 icon组件之扩展自定义图标库选择以及下载图标项目配置以及使用选择以及下载图标 1、首先可以选择自己喜欢的图标库，这里以阿里图标库为例。 2、接着选择自己的想要的图标并且加入购物车。 3、然后打开购物车把图标添加到项目中。 4、点击更多操作，选择编辑项目。 5、然后按照图片相应的填写好。项目配置以及使用 ...

在uView UI中扩展和使用自定义图标

苛学加记事

08-10

4132

uView UI uView UI 是 uni-app 生态最优秀的UI框架之一，提供了众多常有组件。在一般的项目中，都会涉及一些定制的图标，以美化界面上的展示效果。以下记录uView UI扩展和使用自定义图标的步骤；主要有五步操作，按照步骤来，分分钟搞定。 1. 准备图标素材这里使用阿里巴巴矢量图标库iconfont，进行图标的查找和管理。创建一个和项目对应的图标库项目然后设置项目FontClass/Symbol 前缀和Font Family的值分别为custom-icon-和custom-

uni-app uView UI1.x 扩展自定义图标

黄河爱浪的博客-专注CSS,jQuery,uni-app领域

04-19

4072

uni-app uView UI1.x 扩展自定义图标的完整版详细教程

uview 扩展iconfont 图标库，中间碰见的一个小坑

业余前端的职业经历

11-04

1815

中间怎么下载怎么使用我就不说了官网说的很清楚了 https://www.uviewui.com/guide/customIcon.html 其实官网的文档中描述的是通过使用base64的形式引入的，你也可以把下载下来的图标转换成base64的格式然后引入进去有个在线转换的网站 https://transfonter.org/。 https://transfonter.org/ 主要是引入字体的那里有个小问题就是他那个字体必须的是相对项目的根路径否则就会抱找不到我的项目目录是 /s

通过Hbuilder X创建uni-app项目并引入UView

08-18

首先，在项目的根目录下运行`npm install uview-ui --save`命令，这将下载并安装UView UI库。安装完成后，打开main.js文件，导入UView并注册全局组件： ```javascript import uView from 'uview-ui'; Vue.use(uView...

vue项目引入iconfont图标

eqizhihui的博客

10-07

2313

点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。

vue页面和nvue页面、引用阿里图标库-图标方法

qq_45500519的博客

07-21

512

引入阿里字体图标

uniapp中的滚动通知u-notice-bar（Uview)自定义图标

nike的博客

06-13

1115

废话不多说，直接来吧，更改Uview中的u-notice-bar的小喇叭图标；

【VUE】UniAPP之uview组件库，自定义tag封装，支持添加u-icon图标

孑然的个人博客

02-05

1862

【代码】【VUE】UniAPP之uview组件库，自定义tag封装，支持添加u-icon图标。

uview2在线使用iconfont

weixin_46252229的博客

08-17

583

图标库

uniapp uview引入阿里图标，u-dropdown自定义图标

葫芦娃y的博客

02-04

3137

1.去阿里图标库下载所需图标 2.解压把iconfont.css放到项目文件夹 3.修改iconfont文件删除其他的url 只留一个后面是使用额名称或是去阿里图标图编辑查看需要在u-icon上加custom-prefix属性就可以使用了修改uview的组件找到下拉的组件把组价接收的menuicon变成数组形式，对应标题效果： ...

vue项目中引入iconfont(1)

2401_84152911的博客

05-07

781

兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。

uivew中的cell 如何使用阿里巴巴图标库的图标

07-09

在uView中，你可以使用阿里巴巴图标库的图标来替代默认的图标。以下是使用阿里巴巴图标库的图标的步骤： 1. 首先，确保你已经在项目中引入了uView组件库。可以在`App.vue`或需要使用的页面中引入uView： ```vue import uView from 'uview-ui'; Vue.use(uView); ``` 2. 在需要使用阿里巴巴图标库的图标的`cell`组件中，使用`uni-icons`组件，并设置`type`属性为阿里巴巴图标库的类名。 ```vue <template> <view> <cell title="示例" icon="u-icon-add"></cell> </view> </template> <script> export default { data() { return {}; }, }; </script> ``` 3. 在项目的`App.vue`文件中，使用`uni-icons`组件的`customIcon`属性来引入阿里巴巴图标库的样式。可以在HTML的`head`标签内添加以下代码： ```vue <template> <view> <uni-icons customIcon> <style> @import url('https://at.alicdn.com/t/font_1234567_xyz.css'); </style> </uni-icons> </view> </template> <script> export default { data() { return {}; }, }; </script> ``` 请将上述代码中的`https://at.alicdn.com/t/font_1234567_xyz.css`替换为你自己的阿里巴巴图标库的CSS链接。这样，你就可以在uView的cell组件中使用阿里巴巴图标库的图标了。记得将`u-icon-add`替换为你自己需要使用的图标类名。