uniapp中在线引入并使用iconfon图标

已于 2024-03-18 21:35:28 修改
阅读量699 收藏 8
点赞数 8
文章标签： uni-app
于 2024-03-18 21:34:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LELELE__LE/article/details/136814365
版权

终于成功了，历经了3个多小时解决了！！一定要记录一下，祝大家好运！！！

目录

终于成功了，历经了3个多小时解决了！！

一定要记录一下，祝大家好运！！！

第一步 打开iconfont 官网并添加自己所需要的图标iconfont-阿里巴巴矢量图标库

第二步 选择自己需要的图标加入购物车再添加到项目中

第三步 将图标添加到项目中

第四步 下载文件以修改

第五步 文件的引用以及iconfont的应用

第六步 在文件中的使用

第七步 恭喜你 成功啦！！！

看到一篇文章介绍小程序不能使用本地图标，只能直接引用在线连接，加之本人之前尝试本地失败（但不确定是不是步骤不对）

等之后我再试一试本地图标是否可以~~~

现在就先介绍线上引入~~

一步步要耐心哦！你一定可以成功！！！当看到图标那一刻，我真的感慨“功夫不负有心人！！！”

第一步 打开iconfont 官网并新建项目iconfont-阿里巴巴矢量图标库

记得勾选彩色哈，后面会方便很多！！！

第二步 选择自己需要的图标加入购物车再添加到项目中

第三步 下载文件以修改

下载压缩文件后，建议大家在uniapp的根目录下新建static文件夹，并把压缩文件的iconfont.css文件下载到static文件夹里，之后将unicode里面copy的代码粘贴到iconfont.css文件中，并在代码前加上https：

第四步 文件的引用以及iconfont的应用

在app.vue-style中通过import引用文件

css定义iconfont类名，以使用字体，如图中

第五步 在文件中的使用

类名为 iconfont icon-bangzhu

第六步 恭喜你 成功啦！！！

LELELE__LE
关注
uniapp字体图标的使用
12-31
2. 如果使用的是自定义字体库，需要确保CSS文件已经引入，并在`<u-icon>`组件中指定`fontFamily`属性，例如： ```html <u-icon name="my-icon-name" size="30" color="#007aff" fontFamily="my-custom-font"></u-...
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
uni-app项目引入图标
weixin_42373488的博客
01-29 1260
uni-app项目引入图标 普通图标引入 1、阿里巴巴矢量图官网创建图标项目 2、将搜索的图标添加进购物车，在购物车里面将图标添加进项目里面 3、下载该文件到本地，将该文件的css文件复制到项目里面 （并设置大小） 4、修改iconfont.css文件的引入文件，只留下data路径，并用分号结尾 5、项目页面使用icon <view class="icon iconfont 图库的图标名"></view> 彩色图标引入 1、同样创建彩色图标项目，在阿里巴巴矢量图
uniapp 使用 iconfont 图标
最新发布
weixin_51878863的博客
08-21 436
custom-prefix 对应 font-family ，type 对应 icon 后缀带的图标名。font-family 可以用默认的也可以自己命名，我这里是改了的，要改三个地方。全局引入在App.vue中引入，在 标签下引入。局部引入，在需要用到的页面引入，方法一样。iconfont-阿里巴巴矢量图标库。
uni-app引入自定义图标库
2301_82244389的博客
03-29 1300
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取前端学习资料分享给大家，戳这里即可获取**[外链图片转存中…(img-80CjBk04-1711725175126)]
uniapp引入自定义图标
weixin_52102740的博客
07-24 916
uniapp自定义图标
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2339
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
微信sdk在uniapp中下载引入
04-25
微信sdk，1.6.0
uniapp 表格的介绍和使用
11-17
【uniapp表格组件详解】 uniapp表格组件是一个用于展示数据的布局工具，它由四个基本组件构成：uni-table（表格组件）、uni-tr（表格行）、uni-th（表格头）和uni-td（单元格）。这些组件协同工作，帮助开发者创建...
uniapp中使用mathJax解析数学公式
03-15
在uni-app的Vue组件中，你可以使用`v-html`指令插入包含LaTeX公式的HTML字符串，MathJax会自动识别并渲染它们。例如： ```html <div v-html="latexFormula"></div> ``` 在对应的Vue实例中： ```javascript ...
uniapp 在线预览pdf
09-18
首先，我们需要在uniAPP项目中引入这些库，然后通过uniAPP的API与JavaScript进行交互，加载PDF文件并进行转换。这种方式的优点是可以自定义预览界面，但缺点是可能会有性能和兼容性问题，因为转换过程可能比较消耗...
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 2261
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uniapp中引入自定义图标
qq_44242030的博客
05-07 1510
如何在uniapp中使用icon 1.在iconfont官网找你想要的图标 2.在你的uniapp项目中粘贴这段代码，粘贴在app.vue文件的style标签内 注意：粘贴过来需要加https 3.在App.vue的style标签内增加需要使用的图标引用 content 控制来源： ...
uniapp引用外部icon图标
xioxi
03-19 5150
方法一 进入阿里巴巴矢量图标库添加所需使用的icon图标添加至项目中 链接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.进入我的项目中，复制Unicode中的代码至app.vue中 @font-face { font-family: 'iconfont'; /* project id 2431048 */ src: url('//at.alicdn.com/t/font_2431048_f5t7z
uni-app值使用icon图标组件的教学指南
码奴一只猿
06-08 9738
UniApp是一个跨平台的开发框架，允许开发者使用一套代码同时构建多个平台的应用程序。其中，Icon组件是UniApp提供的一个非常实用的组件，用于显示各种图标。本篇文章将详细介绍如何在UniApp中使用Icon组件，并提供详细的示例代码。
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 2063
uniapp中引入iconfont
uniapp引入阿里图标库iconfont的三种方式
Hou_Qiang的专栏
05-10 3887
一、本地引入 1、下载font class文件至本地 2、解压后，将字体文件.ttf,.woff,.woff2和iconfont.css一起拷贝到static目录下 3、修改iconfont.css文件（非常重要） @font-face { font-family: "iconfont"; /* Project id 2142473 */ src: url('~@/static/iconfont.woff2?t=1620622127571') format('woff2'),
在Uniapp中实现在线使用iconfont的图标
m0_63064861的博客
06-29 1130
在Uniapp中实现在线使用iconfont的图标；在自己建的项目下：点击Font Class可以看到下面的在线 css文件。
uniapp 使用在线 iconfont 图标
weixin_52063946的博客
12-08 1233
uniapp 使用在线 iconfont 图标
uniapp中引入并使用echarts
07-15
在uniapp中引入并使用echarts，可以按照以下步骤进行操作： 1. 在uniapp项目的根目录下，使用命令行安装echarts： ``` npm install echarts ``` 2. 在需要使用echarts的页面中，引入echarts的相关文件。可以在页面的`script`标签中添加以下代码： ```javascript import * as echarts from 'echarts'; ``` 3. 在需要使用echarts的页面中，创建一个容器元素用于显示图表。可以在页面的`template`标签中添加一个`canvas`元素，用于显示图表： ```html <template> <view> <canvas id="chart" style="width:100%;height:300px;"></canvas> </view> </template> ``` 4. 在页面的`script`标签中，使用`onLoad`生命周期函数或其他适当的位置，初始化图表并绘制图表数据： ```javascript onLoad() { // 获取canvas元素 const chartCanvas = uni.createSelectorQuery().select('#chart'); // 初始化图表 chartCanvas.fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); const dpr = uni.getSystemInfoSync().pixelRatio; canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; const chart = echarts.init(canvas, null, { devicePixelRatio: dpr, }); // 绘制图表数据 const option = { // echarts配置项 // ... }; chart.setOption(option); }); } ``` 这样，你就可以在uniapp中成功引入并使用echarts来绘制图表了。根据实际需求，可以根据echarts的文档进一步配置和使用图表。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值