如何在uniapp项目中使用阿里矢量图标（iconfont）

最新推荐文章于 2024-07-18 22:35:56 发布
最新推荐文章于 2024-07-18 22:35:56 发布
阅读量1.7k 收藏
点赞数
文章标签： 小程序 微信游戏 javascript svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45356397/article/details/106574001
版权

怎么在uniapp中使用iconfont图标

  • 1.我是这样做的，首先下载自己需要的图标源码，解压到自己的项目目录里面

    1. 放在了静载资源目录下面，随便起个名字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6tcy99NR-1591347149503)(https://s1.ax1x.com/2020/06/05/trhZ28.png)]

  • 3.然后再main.js入口文件中引用就行了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-El5IQRPe-1591347149506)(https://s1.ax1x.com/2020/06/05/trhNMF.png)]

  • 4.最后一步就是使用了

小样还想跑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）
高级前端工程师
02-01 2109
uniapp，h5，移动端，阿里图标库，阿里巴巴图标，uniapp使用阿里图标库不显示怎么办，解决uniapp引入阿里图标报文件查找失败，uniapp报错iconfont文件报错文件查找失败，uniapp移动端不显示阿里图标， uniapp app中阿里图标库不能使用，uniapp项目中iconfont阿里云图标不显示，uni-app引入阿里矢量图在移动端不显示的问题，移动端不显示但在h5网页能显示，阿里图标在移动端无法显示怎么办，如何解决uniapp引入阿里图标后在h5能显示，但在移动端平台却不显示，un
uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标应用，改变iconfont，uniapp 引用阿里矢量图标
jp_567的博客
08-21 301
一.图标下载 1. 话不多说上网址https://www.iconfont.cn/ 2.先选择图标加入购物车，记得先登录 3.去购物车，把图标添加到项目，没有项目的创建一个项目（为啥要创建项目不直接下载？答：方便后期修改图标和添加图标） 4.去资源管理点击我的项目，下载到本地。（联网资源会导致微信小程序及app等出现不显示的问题） 解压后的目录如下，现在我就做好准备工作了 二.把图标引入到项目 1.先来看uniapp项目结构 好多开发人员喜欢把资源放在static目录下，其实这样会.
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4672
uniapp 使用阿里图标
uniapp-阿里巴巴矢量图标使用（字体图标引用）
最新发布
m0_62626838的博客
07-18 336
3.解压下载好的压缩包，将里面的文件全部放到static中font文件夹中（自己新建），并打开demo_index.html文件，复制其中的字体声明代码至自己的页面的css中。6、打开font文件夹里的demo_index.html，选择Unicode中复制图标的代码,用到页面中。4、修改复制过来的字体声明中的路径。（即下图的src路径需替换为font中的.tff文件）5、在页面的元素样式中需引入font-family: 'iconfont';网站，将想引入的图标加入购物车。
uniapp使用阿里icon详细步骤
qq_33444716的博客
03-30 4219
1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车，并且点击购物车，添加到相应的项目 2. 找到对应的icon项目，点击下载至本地 3.将红框框起来的文件放到项目中 4. 创建一个iconfont.css，做以下处理 @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('~@/static/font/iconfont.ttf') forma.
uni-app中使用iconfont
weixin_51198863的博客
02-20 619
前言 uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样； app端不支持在main.js引入的css样式，需要在style中引用； 微信小程序不支持本地的字体图标文件，需要换成网络路径； 为了一套样式多端适用，我们使用下面这种方式来实现 首先打开阿里巴巴矢量图官网 复制图中的代码，那个是网络路径； 在uni-app项目中，app.vue文件下，style中粘贴并修改成如下样式 /*每个页面公共css */ @font-face { font-family: 'icon
uniapp 中使用彩色图标，引入阿里图库iconfont
hu104160112的博客
06-18 1182
1.选择symbol模式，下载到本地 2.下载后解压 3.在解压开的文件夹中 shift+右键 打开powershell 窗口 执行代码：npm install -g iconfont-tools 4.然后执行代码：iconfont-tools 然后一路回车 5.文件夹中就多出一个文件 iconfont-weapp 6.把 iconfont-weapp-icon.css 移入你的项目中 7.App.vue中添加以下代码 @import "./common/iconfont-weapp/iconf
uniapp引入阿里巴巴矢量图标库
Gzyhjf9的博客
05-18 1553
uni-app中使用阿里巴巴矢量图标库 1、打开网址，链接： 阿里巴巴矢量图标库 2、注册账号并登录，已有账号直接登录 3、选择图标，点击添加入库 4、点击购物车图标，查看添加入库的图标 5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。 6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。 注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。 7、下载代码至本地 8、找到下载的压缩包，解压缩后复制 iconfo
uni-app 如何使用svg
BradenHan的专栏
04-27 5702
在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。下面分别举例说明：虽然uni-app本身可能不直接支持标签，但可以通过以下方式间接使用：a. 作为Image组件的源将SVG文件作为静态资源放入项目中，然后通过组件的属性引用。这种方法适用于静态SVG图像。示例： 确保SVG文件（例如）已放置在项目的目录下。b. 作为Background Image如果需要将SVG作为背景图，可以
uni-app/vue 引入自定义图标库——Iconfont-阿里巴巴
leyu_miss的博客
01-11 467
uni-app引入自定义图标库——Iconfont-阿里巴巴前言1.首先在[官网](https://www.iconfont.cn/)登录注册，选择你需要的图标加入购物车，可以多选2.新建项目，把购物车中的图标添加到项目，然后点击下载至本地3.解压后的文件如图所示，复制iconfont.css文件，粘贴到我们项目的static（或common）目录下，重命名为iconfont.scss(或者直接可以copy过来)4.打开我们复制过来的css文件，把里面引用了但是我们没有复制过来的文件的那几行删除掉（留下da
uniapp使用iconfont的正确的方式
zz18256889177的博客
07-13 231
https://ask.dcloud.net.cn/article/35443
uniapp引用iconfont图标及用法
qq_41556539的博客
07-21 765
引入方法 1.在iconfront-阿里巴巴矢量图标官网找好图标 2.点击复制图标代码 打开找好相对应的图标 点击红圈的复制代码后在网页打开，出现如下： 在项目下新建common文件夹,common文件夹下新建iconfont.css。把iconfont的代码复制到iconfont.css。记住要将iconfont.css文件内url路径转换为在线路径即加上https:如下： **使用方式 ** 1.在App.vue里全局引入该图标文件@import “/common/iconfont
uniapp 使用在线 iconfont 图标
weixin_52063946的博客
12-08 1212
uniapp 使用在线 iconfont 图标
Uni使用iconfont图标或者自定义图标
well2049的博客
12-01 7915
首先到阿里巴巴图标矢量库里面掉选自己喜欢的图标收藏到自己项目里面的。 注意事项： 1，修改项目内的图标字体名称（iconfont是uni的关键字暂不能用）。 2，使用网络字体。 项目使用 1，拷贝iconfont.css 文档到项目中，并修改引入的字体路径： @font-face {font-family: "eosfont"; src: url('https://at.alicdn.com...
uniapp 开发小程序使用iconfont彩色图标
程序猿小白的博客
12-18 2621
1、在阿里图标官网添加需要的图标到你的项目中，然后下载文件到本地：https://www.iconfont.cn/ 2、解压下载后字体文件，如下： 3、在第二步解压的目录中，打开cmd： 输入命令行：npm install -g iconfont-tools 命令结束后，运行：iconfont-tools 出现如下图所示的内容，按图示输入文件名即可（或者一直回车） 4、以上命令运行结束后，会在目录中生成iconfont-weapp文件夹： 进入文件夹，里面的...
Vue使用svg图标 | uniapp使用svg图标 （以及解决配置了svg-sprite-loader但还是不显示svg图标的问题）
热门推荐
坚信万物皆可切的切图仔
07-27 1万+
Vue自定义icon-svg组件 uniapp自定义iconfont组件 打开 https://www.iconfont.cn/ 阿里巴巴图标库，找到需要的图标添加到购物车
uni-app中使用iconfont字体图标教程
LW0512的博客
07-20 1122
uniapp tabbar配置 iconfont app.vue
Uniapp使用svg
qq_39443970的博客
10-24 7680
uniapp基础使用svg
在uni-app中使用阿里巴巴图标库字体图标
gysea123321的博客
01-11 760
阿里巴巴图标库 添加图标、下载、引入的使用方法： 1、添加图标 2、下载到字体图标文件后，复制圈中的两个文件到static目录下： 3、新建一个自定义字体图标样式文件： font-icon.css 4、给font-icon.css添加内容 5、font-icon.css具体代码： @font-face { font-fami...
uni 项目使用阿里矢量图标库
05-12
使用阿里矢量图标库可以为你的 uni-app 项目提供丰富的图标资源，可以在不同的页面和组件中使用。以下是在 uni-app 中使用阿里矢量图标库的步骤： 1. 在阿里矢量图标库官网上选择需要的图标，将其添加到购物车中。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值