uview2在线使用iconfont

LinDon_

已于 2023-04-14 11:33:55 修改

阅读量580

点赞数

分类专栏： ui-app 文章标签：前端

于 2022-08-17 11:44:24 首次发布

本文链接：https://blog.csdn.net/weixin_46252229/article/details/126382877

版权

ui-app 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

uview2 使用字体图标库

创建图标库
项目构建
页面使用

创建图标库

步骤一
在这里插入图片描述

步骤二
在这里插入图片描述

项目构建

步骤一
在这里插入图片描述
步骤二
注：引入样式须放在首行

App.vue

<style lang="scss">
  @import "./static/iconfont.css";
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	@import "common/demo.scss";
	
</style>

页面使用

  <u-icon name="backspace" custom-prefix="custom-icon-home" size="30" color="#888888"></u-icon>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LinDon_

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【Vue】Vue3.0 结合iconfont 阿里图标库的使用

qq_43186285的博客

03-26

1637

阿里巴巴矢量图标库新增src/icons/index.js 和 src/icons/svg 文件 index.js import Vue from 'vue' import SvgIcon from '@components/IconFont' // 全局注册 Vue.component('svg-icon',SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) con.

uview2.0 如何自定义图标

weixin_44179923的博客

12-12

3185

首先去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

3545

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

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

柑橘乌云_

04-10

2253

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

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

最新发布

m0_59415345的博客

07-17

1138

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

uView 2.0使用自定义iconfont图标

baidu_37302589的博客

05-16

5005

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

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

章小鱼的博客

10-10

3028

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

iconfont Vue中使用

u014688172的博客

01-10

537

使用iconfont图标标签名字一定要以iconfont开头 ...

vue项目引入iconfont图标

eqizhihui的博客

10-07

2306

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

vue:使用技巧汇总篇

webfullstack的博客

07-11

781

初级级提升篇 v-bind:class=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;{xx:shopType.selected,dashed:!shopType.selected}&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; &

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

业余前端的职业经历

11-04

1814

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

uview2完整资源，uniapp组件框架

02-18

uview2完整资源，uniapp组件框架

vue element-ui引入第三方图标在线版

Toozky的博客

03-19

2146

参考链接：Vue Element-UI使用icon图标(第三方)–在线版 - 简书 vue项目版本为vue3 打开iconfont-阿里巴巴矢量图标库，注册登录之后回到首页在首页顶部菜单图标管理>我的项目点击新建项目新建项目项目名称随意记住设置的前缀，一会儿要用去图标库里搜索选择自己需要的图标加入到购物车点击菜单栏上的购物车添加至项目选择刚才创建的项目点击确定跳转至项目页点击Font class 鼠标箭头放到图标上可以更改名称点击生成代码并复制在vue项

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

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

04-19

4063

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

vue2学习文档

zsy1833579605的博客

05-29

2228

vue2的基础语法及相关插件使用

uniapp-uView在离线状态下无法显示icon图标的问题

山河明月

12-21

5181

1、修改uview-ui下的u-icon.vue配置文件，一般目录在 uni_modules\uview-ui\components\u-icon\u-icon.vue。 2、源文件引入的是阿里巴巴的icon。 3、根据这个网址下载这个.ttf格式的字体文件。 5、你会得到一个压缩包，解压之后打开这个文件。 7、然后报错，重新运行一下就可以正常显示了。 6、把上述base64格式文件复制到这里。

解决uview2 u-icon图标不显示问题，亲测必行

lianghuihaoKing的博客

11-03

4397

我相信很多童鞋也遇到这个情况，uview2 用在微信上其他控件都好好的，u-icon愣是不显示图标。首先原uview-ui/components/u-icon/u-icon.vue这里有个获取ttf加载字体的地方无论小程序是否正常访问到链接，或者下载ttf下来，放到小程序static文件夹里，都不好使。后来看到网上有离线情况下访问字体的方法，决定一试。咦咦咦，竟然好使了，凸凸太棒辣！详细流程如下：看文章哈

vue2的文档

qq_40011574的博客

09-25

4780

uview模态框使用

09-21

uView是uni-app生态专用的UI框架，它提供了一套丰富的组件和工具，其中包括模态框（Modal）组件。使用uView的模态框可以轻松创建和管理弹出框。首先，在你的vue文件中引入uView的模态框组件： ```javascript import { Modal } from 'uview-ui' export default { components: { Modal }, ... } ``` 然后，在模板中使用Modal组件创建模态框： ```html <template> <Modal v-model="show" title="标题" :show-ok="true" :show-cancel="true">  ... </Modal> </template> ``` 在data中定义show属性来控制模态框的显示和隐藏： ```javascript export default { data() { return { show: false } }, ... } ``` 通过修改show属性的值，可以控制模态框的显示和隐藏。例如，点击一个按钮时显示模态框： ```html <template> <button @click="show = true">打开模态框</button> ... </template> ``` 需要注意的是，uView的模态框组件还提供了许多配置项，如设置标题、确定和取消按钮的文本、是否显示按钮等。你可以根据自己的需求进行相应的配置。