uni-app 引入自定义图标（iconfont-阿里巴巴矢量图标库）

最新推荐文章于 2024-03-29 23:13:04 发布
最新推荐文章于 2024-03-29 23:13:04 发布
阅读量712 收藏 2
点赞数 1
分类专栏： uni-app Vue html5 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35827660/article/details/118808642
版权
uni-app 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
html5
3 篇文章 0 订阅
订阅专栏
Vue
2 篇文章 0 订阅
订阅专栏

我使用 iconfont-阿里巴巴矢量图标库 作为例子

  1. 首先进入 iconfont ，选择我的项目
    在这里插入图片描述
  2. 新建项目
    在这里插入图片描述
  3. 输入项目名称，注意FontClass/Symbol 前缀 比Font Family需要多一个横杠(-)
    在这里插入图片描述
  4. 添加图标
    在这里插入图片描述
    5.选择对应的SVG上传，可以在iconfont下载svg图标再上传（如果有更好的方式留言告诉我~嘻嘻嘻）
    在这里插入图片描述
  5. 上传完后，即可看到对应的图标，在此可以对图标进行相应的编辑操作
    在这里插入图片描述
    在这里插入图片描述
  6. 点击下载至本地，并将下图对应的四个文件放置在uni-app的static文件夹中（可以创建iconfont文件夹进行放置）
    在这里插入图片描述

在这里插入图片描述

  1. 存放在uni-app的路径
    在这里插入图片描述
  2. 修改iconfont.css，需要加上@符号
    在这里插入图片描述
  3. 在APP.vue引入iconfont.css
    在这里插入图片描述
  4. 使用，加上在创建项目时填写的前缀并且name属性改成对应的图标name
    在这里插入图片描述
  5. name去那里获取？去我的项目对应图标的编辑
    在这里插入图片描述
  6. 大功告成
海森堡丶
关注
专栏目录
uniapp引入阿里巴巴矢量图标库
m0_73075579的博客
05-09 425
第一部分：创建矢量图标库1.登录阿里巴巴矢量图标库，点击导航栏的资源管理-我的项目。2.点击右上角加号图标创建。3.根据实际情况填写信息，点击新建。 4.现在项目名为wx-app的图标库就已经创建完成，在刷新页面后，可以在“我发起的项目”中看到。第二部分：添加图标至图标库1.可以在首页进行搜索，寻找自己所需要的图标。2.这里点击搜索关键词“箭头” ，进入搜索结果页。3.将鼠标移动到我们想要添加的图标上，点击购物车，将图标添加进购物车。 4. 点击导航栏的购物车，可以看到我们刚才添加的图标，点击下方的添加至
uniapp引入自定义图标
最新发布
weixin_52102740的博客
07-24 731
uniapp自定义图标
uni-app引入自定义图标库
2301_82244389的博客
03-29 1288
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取前端学习资料分享给大家，戳这里即可获取**[外链图片转存中…(img-80CjBk04-1711725175126)]
uni-app引入自定义图标库——Iconfont-阿里巴巴
star_of_science的博客
09-02 2972
uni-app官方提供的图标库很少，今天来介绍一下如何引入自定义图标库，介绍如何使用阿里巴巴矢量图标库
uniapp 添加自定义图标
朝阳39的博客
12-28 1273
/启动项目，效果如下。
uni-app-小程序自定义底部菜单样式示例
08-12
【uni-app小程序自定义底部菜单样式示例】 在uni-app框架中，开发微信小程序、支付宝小程序、H5等多端应用时，我们经常会遇到需要自定义底部导航菜单的需求，以实现更加个性化和一致性的用户体验。本示例将详细介绍...
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件指令部分，支持自定义图片，文本、按钮等功能。
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
04-17
uni-app自定义弹窗组件，支持自定义图片，文本、按钮等功能。
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
"uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip" 是一个针对uni-app框架的项目，其核心功能是实现自定义底部导航栏。uni-app是一个多端开发框架，允许开发者使用一套代码生成包括iOS、Android、H5...
open cv提取图片特征值_基于VGG16网络提取Flicker8K数据集图像特征
weixin_39612726的博客
11-28 408
# !/usr/bin/env python3# -*- coding: utf-8 -*-# @Time : ${20200326} ${18:00}# @Author : ZicoZhou# @Version :1.0# @Function : VGG16网络提取图像特征from keras.models import model_from_jsonfrom keras.models impo...
uni-app项目引入图标
weixin_42373488的博客
01-29 1248
uni-app项目引入图标 普通图标引入 1、阿里巴巴矢量图官网创建图标项目 2、将搜索的图标添加进购物车，在购物车里面将图标添加进项目里面 3、下载该文件到本地，将该文件的css文件复制到项目里面 （并设置大小） 4、修改iconfont.css文件的引入文件，只留下data路径，并用分号结尾 5、项目页面使用icon <view class="icon iconfont 图库的图标名"></view> 彩色图标引入 1、同样创建彩色图标项目，在阿里巴巴矢量图
uni-App引入iconfont
weixin_34150224的博客
11-01 1637
uni-app 是什么 uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。 通过编写 一套代码，将其编译到iOS、Android、微信小程序等多个平台。 目前可以打包成Android、IOS的App、小程序 有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用，我也懒得入坑 网上的教程很少，就连简...
uni-app 使用 iconfont（阿里图标）
weixin_42448623的博客
01-11 2277
iconfont地址 1、挑选图标 添加入库 查看添加的图标 添加到项目 没有项目就新建一个 下载css文件到本地 把css放到你的项目目录下 在app.vue导入 @import "./static/css/iconfont.css"; .iconfont { display: inline-block; } 点击生成代码 复制代码 替换 iconfont.css ...
uniapp 开发小程序使用iconfont彩色图标
程序猿小白的博客
12-18 2624
1、在阿里图标官网添加需要的图标到你的项目中，然后下载文件到本地：https://www.iconfont.cn/ 2、解压下载后字体文件，如下： 3、在第二步解压的目录中，打开cmd： 输入命令行：npm install -g iconfont-tools 命令结束后，运行：iconfont-tools 出现如下图所示的内容，按图示输入文件名即可（或者一直回车） 4、以上命令运行结束后，会在目录中生成iconfont-weapp文件夹： 进入文件夹，里面的...
uniapp中引入iconfont字体图标库
lvfeifeiCSND的博客
05-10 310
1、首先下载iconfont图标压缩包，将iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2六个文件放进uniapp静态文件static中的fonts文件夹下 2、修改iconfont.css中引入文件的方式 将里边所有src: url('iconfont.eot') 改成src: url('~@/static/fonts/iconfont.eot') 3、在项目中通过 @import url(
uni-app中使用iconfont
weixin_51198863的博客
02-20 622
前言 uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样； app端不支持在main.js引入的css样式，需要在style中引用； 微信小程序不支持本地的字体图标文件，需要换成网络路径； 为了一套样式多端适用，我们使用下面这种方式来实现 首先打开阿里巴巴矢量图官网 复制图中的代码，那个是网络路径； 在uni-app项目中，app.vue文件下，style中粘贴并修改成如下样式 /*每个页面公共css */ @font-face { font-family: 'icon
uniapp小程序中使用iconfont字体图标
m0_49529959的博客
08-04 1540
1.Uniapp小程序项目的common文件夹下面新建iconfont.css文件，App.vue文件中全局引入样式 2.iconfont官网： https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.1 选中iconfont字体图标，添加入库 2.2 添加至新项目，图标管理-我的项目 2.3 可直接复制代码，也可先点击下方新icon来源，生成新代码后再复制，复制到uniapp小程序项目的common下新建的ico
uni-app接入iconfont图标库
09-12
要在uni-app中使用iconfont图标库，您需要执行以下步骤： 1. 在iconfont官网中选择您需要的图标，并且将它们添加到您的购物车中。 2. 下载您的图标包并解压到您的本地目录中。 3. 在您的uni-app项目中，将...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值