uniapp如何使用icon阿里图标呢？

最新推荐文章于 2024-05-11 16:37:28 发布
最新推荐文章于 2024-05-11 16:37:28 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： uniapp
mubeixi
本文链接：https://blog.csdn.net/weixin_44872995/article/details/107713583
版权

至于为什么写这篇博客呢（源于某猪太笨）

  1. 首先注册icon账号 https://www.iconfont.cn/
  2. 挑选自己中意的图标加入购物车
    在这里插入图片描述加入购物车 然后添加到自己的项目中

3.在这里插入图片描述在自己的项目中选择font-class 在新网址地址栏打开图片文件
4.在这里插入图片描述把这些文件全部ctrl a c+ v 粘贴到自己项目中icon.scss文件中（建议icon命名以用于后期的理解）

5.我们如果想全局使用图片的话 不建议在app.vue中引入 这样所有页面都会加载一边icon.scss，占据空间，对于小程序来说很不友好，通常来说我们可以做成组件，组件中引入

在这里插入图片描述调用的时候我们引入组件传type值和size color就能使用

木贝西
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在uniapp中如何使用icon图标
renshanxk的专栏
12-15 2万+
在uniapp中使用icon图标的方法：首先注册icon账号，挑选自己中意的图标加入购物车，加入购物车；然后添加到自己的项目中，选择【font-class】在新网址地址栏打开图片文件即可。 在uniapp中使用icon图标的方法： 1.首先注册icon账号 2.挑选自己中意的图标加入购物车，加入购物车 然后添加到自己的项目中 3.在自己的项目中选择font-class 在新网址地址栏打开图片文件 4.把这些文件全部ctrl a c+ v 粘贴到自己项目中icon.scss文件中（建议icon命名以
uni-app全局添加阿里矢量字体图标
weixin_45838680的博客
06-06 273
在app.vue中引入字体库样式 全局使用
如何在uniapp项目引入阿里图标库的iconfont(线上)
最新发布
it_laowu的博客
05-11 502
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
关于Uni-app引入icon的学习
沙雕JavaScripter的博客
08-04 745
关于Uni-app引入icon的学习 链接：https://blog.csdn.net/gyueh/article/details/106792103?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachine
uniapp引用外部icon图标
xioxi
03-19 4853
方法一 进入阿里巴巴矢量图标库添加所需使用的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
五 uniapp的微信小程序中正确使用阿里巴巴字体元素iconfont
拉风的小锋
07-14 665
上一章节的认识 上一章节我们一起了解了微信小程序的定位，调用第三方导航等功能，传送门 遇到的问题 当我们将微信小程序进行上传的时候，也许你会收到微信的反馈，XXX文件未被上传，这是因为微信在服务器内设置了只可以上传它定义的名称类型 下面是微信上传的文件类型 可上传文件类型 因此我们的字体样式iconfont.eot等是不能上传的，若上传则显示未上传成功，如图所示： 解决方式 打开网址https://www.iconfont.cn/，注册登录，新建一个项目，如图： 然后进入图标库中搜索我们想要的图标，
uniapp字体图标的使用
12-31
uniapp字体图标的使用
阿里云产品图标 icon
05-10
亿图图示使用 edmax 原图和橙系都有，合计200多个
vue使用自定义icon图标的方法
08-27
Vue 使用自定义 Icon 图标的方法 本文主要介绍了在 Vue 中使用自定义的 Icon 图标的方法。自定义 Icon 图标可以丰富 Vue 项目的视觉体验，为用户提供更加直观的交互方式。下面将详细介绍两种使用自定义 Icon 图标的...
阿里云拓扑ICON图标矢量素材
02-19
阿里云所有产品资源ICON图标矢量素材下载 包含弹性计算、数据库、域名网站等
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
uni-app值使用icon图标组件的教学指南
码奴一只猿
06-08 8370
UniApp是一个跨平台的开发框架，允许开发者使用一套代码同时构建多个平台的应用程序。其中，Icon组件是UniApp提供的一个非常实用的组件，用于显示各种图标。本篇文章将详细介绍如何在UniApp中使用Icon组件，并提供详细的示例代码。
uni-app h5修改浏览器导航栏的 title以及icon
Amelian的博客
02-23 8183
1.title 在pages.json文件中修改:"navigationBarTitleText":"uni-app" 2.icon的修改 2.1 在static中新建一个index.html文件作为模板文件，并且将你的icon图片也放在static文件夹下 2.2 在index.html文件中加入如下代码（记得icon文件就是你放在static文件夹下的图片，我这里举例为logo1.jpg） <!DOCTYPE html> <html lang="...
在uniapp中使用 iconfont
m0_71474019的博客
06-01 168
iconfont使用
uView 扩展图标(使用阿里iconfont图标)
weixin_47218793的博客
09-29 3434
uView引用阿里图标 步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理-----我的项目 4.点击项目设置,配置图标前缀(Font Family名称比FontClass/Symbol前缀少一个 - ) ,保存 5.点击 下载本地,把下载的文件解压 6.在uniapp项目根目录新建一个文件夹(我的叫common/cs...
uni-app：阿里巴巴图标库icon的使用步骤
weixin_46162592的博客
07-28 1690
记录一下在uni-app中使用阿里巴巴图标库icon的详细步骤
【uniapp】icon图标的使用
weixin_72709530的博客
09-07 1967
uniapp使用icon图标
在uni-app项目中简单使用iconfont字体图标
yanyunqi02的博客
05-13 3817
简单的使用iconfont图标
阿里巴巴矢量图标库在uni-app中的使用方法
m0_58611644的博客
01-16 1165
2.打开下载到本地的项目文件，将箭头所指的四个文件放入项目的static目录下(可以新建个文件夹放入，方便管理)执行完后项目文件夹中会出现一个新的文件夹 iconfont-weapp 然后重复。3.打开iconfont.css文件，然后将顶部 @font-face{}第二种 Symbol中在图标上点复制代码 icon-icon-03_ji。替换为你的项目中Unicode下的 @font-face{}切换到刚才下载到本地的项目文件目录下执行该命令。中的2和4(只要该文件夹中的 .css文件)
uniapp如何使用icon图标
10-08
UniApp中使用Icon图标非常简单。你可以使用UniApp提供的默认图标，也可以自定义Icon组件。 如果使用UniApp提供的默认图标，你只需要在需要的地方使用Icon组件，并设置type属性为相应的图标类型即可。例如： <template> <view> <icon class="my-icon" type="success" /> <icon class="my-icon" type="info" /> <icon class="my-icon" type="warning" /> <icon class="my-icon" type="error" /> </view> </template> <style> .my-icon { font-size: 36rpx; } </style> 如果UniApp提供的默认图标无法满足需求，你可以自定义Icon组件。首先，在一个.vue文件中定义一个自定义Icon组件，例如： <template> <view class="custom-icon"> <text class="icon-text">{{ iconName }}</text> </view> </template> <script> export default { props: { iconName: { type: String, required: true } } } </script> <style> .custom-icon { width: 100rpx; height: 100rpx; border: 1rpx solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .icon-text { font-size: 40rpx; } </style> 然后，在App.vue或需要使用Icon组件的页面的.vue文件中引入自定义Icon组件，例如： <template> <view> <!-- 其他页面内容 --> <icon class="my-icon" type="success" /> </view> </template> <script> import icon from '@/components/uni-icon/uni-icon.vue' export default { components: { icon } } </script> <style> .my-icon { font-size: 36rpx; } </style> 希望能帮到你！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木贝西

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值