uni-app引用线上iconfont

最新推荐文章于 2024-08-31 08:30:00 发布
最新推荐文章于 2024-08-31 08:30:00 发布
阅读量413 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45648000/article/details/111999596
版权

获取到css样式文件

1.进入到项目的font class，复制css的链接在浏览器中打开；
在这里插入图片描述
2.在浏览器中打开的css样式文件如下：
在这里插入图片描述
3.复制样式文件到项目中进行保存
作者新增了iconfont.css文件，将css样式文件复制进来；
在这里插入图片描述

使用iconfont

在文件中使用；

<i class="iconfont icon-pinglun"></i>

在这里插入图片描述
其中icon-pinglun来自于如下；
在这里插入图片描述

小小的产品经理
关注
专栏目录
在UniApp中如何使用Iconfont
RaAutoit的博客
09-27 926
本文将详细介绍在UniApp中使用Iconfont的步骤，并提供相应的源代码示例。通过获取Iconfont图标库，导入图标字体文件并配置全局样式，你可以轻松地在UniApp项目中使用各种矢量图标。将下载的Iconfont图标文件解压，你会得到一个包含字体文件（例如.ttf或.woff）和一个样式文件（例如.css或.scss）的文件夹。根据你在Iconfont官网选择的图标，修改类名即可展示不同的图标。在上面的示例中，我们使用了名为"heart"的图标，并将其样式设置为24像素大小和黑色。
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 6113
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
UniaApp引入Iconfont
最新发布
weixin_41562028的博客
08-31 524
官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。
在 uni app项目中引入 iconfont (本地引入和在线引入方式)
dongxiaogang5_5的博客
07-05 2252
首先登录 iconfont 官网（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2） 找到需要的字体图标，如果创建项目组的话，就在–我的项目–点击，下载至本地；如果是直接加入购物车的话，就直接点击下载代码； 这两种方式都会下载一个 压缩文件，解压压缩文件之后，文件目录如下（其中我已经标注了两个文件名）： 将上图中标注的 CSS 文件 复制到项目中的static目录下，也可以是其他路径下，只要引入的时候路径对就ok;打开网址：
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 2301
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uni-app 使用 iconfont
u012746918的博客
03-08 1759
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
uni-app跨平台开发知识点总结
2201_76025316的博客
04-10 1990
跨平台：uni-app 支持开发微信小程序、支付宝小程序、H5 网页、App 等多个平台的应用，只需编写一套代码，即可在多个平台上运行。组件化开发：uni-app 采用组件化开发模式，页面由多个组件构成，开发者可以灵活组合和复用组件，提高开发效率和代码可维护性。Vue.js 生态：uni-app 基于 Vue.js 框架，开发者可以充分利用 Vue.js 的生态系统和丰富的插件来开发应用，享受 Vue.js 带来的便利和效率。优秀的性能。
uni-app导入文档文件
v_loading的博客
04-21 1436
#准备 ##下载插件 插件地址 https://ext.dcloud.net.cn/plugin?id=1015 选择版本导入插件 ##引入 ##使用
uni-app中使用自定义图标库
qq_43579525的博客
06-30 8065
方法一： 1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 3-1：未修改前是这样 @font-face {font-family: "iconfont"; src: url...
【标准uniapp创建和引入一些资源的基本操作，可作为基础模版——Vue3、HbuilderX3.99】
kaifaboy的博客
01-19 1718
组件名称swiper.vue 或者 Swiper.vue , 在传递数据的时候有可能图片就不见了。改变图片的大小咱们要用rpx的单位。本身swiper是有150px的默认高度，app中需要改变默认高度需要加入:swiper{width:100%;
uni-app引入自定义图标库
weixin_44433499的博客
07-21 935
1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 方法一： 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 删除划线部分，保留结尾分号。 删除后： @font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09
uniapp引用iconfont矢量图
LzzMandy的博客
05-14 855
阿里矢量图网址：https://www.iconfont.cn/ 1、先创建【我的项目】 2、 【选择图标】，【添加入库】，【添加至项目】 3、【下载至本地】 4、解压之后，把【iconfont.css】文件复制到uniapp的本地项目中 5、在步骤3的图中，选择【查看在线链接】 6、复制上述代码到【iconfont.css】文件中，整个替换掉【@font-face】部分，并在【//】前追加【https:】，如下所示： 7、 在项目中的引用如下，可以使用style设置一..
uni-app 引入线上的阿里 iconfont图标库
weixin_44684357的博客
01-07 743
小程序的代码包不能超过4M，为了压缩代码包的大小，可以通过第三方链接引入图标资源 iconfont 无疑是最常用的第三方图标库，这里介绍一下在微信小程序引入 Iconfont 的方法 在App.vue 中引入 1， 选择一个图标，然后添加到库； 2， 添加至项目 3，然后再我的项目中将他下载到本地 4，下载后的文件如图，找到 iconfont.css，复制文件中所有代码 5，复制以后在小程序项目中建一个 iconfont.wxss，粘贴到 iconfont.wxss 中 6，然后在 App.vue
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 2070
uniapp中引入iconfont
uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
qq_39961695的博客
12-31 1万+
全：小程序中使用iconfont的三种方式
uniapp引入本地iconfont
王延朕的博客
12-06 1346
2.我们可以用的是 iconfont.css, 我们将 iconfont.css 拷贝至项目的 src/static/font/iconfont.css。1.iconfont官网下载相应代码（
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
uniapp引入iconfont
小白白的博客
07-04 637
uniapp在线引入iconfont图标 1.登录iconfont账号(本人使用微博账号登录) 2.创建项目 > 以lianxi项目为例 3.选择自己用到的图标加入到项目 4.生成CSS代码 5.复制代码到浏览器打开，前面加https: 6.复制生成的代码到自己项目中并在所有url开头的代码前面加https:（需要自己创建一个css文件） 7.最后在项目中使用即可 <view class="iconfont icondengji"></view> iconfo
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 2073
第一步： 你得拥有一个uniapp项目 第二步 点击iconfont官网 在首页选好图标，在项目中新建一个css 将上面的1复制在css中，再点开下面这个链接 再复制这个，在css中，下面就是css的代码了 @font-face { font-family: 'iconfont'; /* Project id 2859888 */ src: url('//at.alicdn.com/t/font_2859888_csff1a0k5tm.woff2?t=1634008673174') fo
uni-app接入iconfont图标库
09-12
要在uni-app中使用iconfont图标库，您需要执行以下步骤： 1. 在iconfont官网中选择您需要的图标，并且将它们添加到您的购物车中。 2. 下载您的图标包并解压到您的本地目录中。 3. 在您的uni-app项目中，将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值