uni-app引入阿里字体图标

最新推荐文章于 2024-06-15 17:43:34 发布
最新推荐文章于 2024-06-15 17:43:34 发布
阅读量149 收藏 1
点赞数
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dilemma_me/article/details/115303063
版权
本文档详细介绍了如何从图标库中选择并下载图标，包括将图标添加到购物车、新建项目、下载及解压步骤。接着，指导读者配置CSS文件，删除不必要的部分，并在适当位置添加src引用。同时，需要在static文件夹下创建font文件夹，将CSS文件放入其中。最后，在Vue项目中引入CSS文件，并在所需位置插入代码以显示图标。
摘要由CSDN通过智能技术生成

下载

选择你所需要的图标加入购物车内，添加至项目 （若没有项目就自己新建项目），之后点击下载
在这里插入图片描述
下载后解压 打开iconfont.css 文件
在这里插入图片描述

配置

删除.css文件中如下部分 并在保留的那一行加上src: ,在行末尾把**,** 换为**；**（注意中英文标点符号）
在这里插入图片描述
在static 文件夹下面新建font文件夹 将刚刚的css文件添加进去
在这里插入图片描述

引入
在app.vue文件中添加如下代码

在这里插入图片描述

@import url("@/static/font/iconfont.css");

在所需要的文件位置里面加入

<view class="iconfont icondianpu"></view>

在这里插入图片描述

Archer_yy
关注
专栏目录
【uniapp引入阿里字体图标】
ytfty24124的博客
10-28 536
nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
移动应用开发——基于uni-app框架
m0_61839930的博客
06-17 891
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
uniapp字体图标的使用步骤详细版【前端开发】
跳探戈的小龙虾的博客
01-04 1902
目录 I.字体图标去哪里找？ II.uniapp中使用字体图标的详细步骤 I.字体图标去哪里找？ 更新中ing... II.uniapp中使用字体图标的详细步骤
uni app中使用字体图标
xx_ll_的博客
08-17 214
在iconfont官网中找到需要的字体图标，将字体图标添加至项目
uni-app使用字体图标
qq_41722550的博客
07-11 1421
第一种方式： https://www.iconfont.cn/ 阿里图标 输入插件名称，例如search,选择图标加入购物车，添加到项目中，生成代码，复制网址，前面加上https:，得到了一篇样式，复制，项目下新建common目录，新建css文件夹，新建css文件，把刚才的代码复制过来，在自己需要的页面中引入css文件，记得删除url,在元素前面加上，.iconfont .icon-search这两个类即可。 第二种方式：使用uni-app组件,https://ext.dcloud.net.cn/ .
uniapp字体图标的使用
qq_59076775的博客
02-28 5714
前言:今天和大家分享一个uniapp字体图标的使用方法，对于一个刚步入uniapp的小白来说,请多指教。 一.先从字体图标库下载对应的字体图标 下载完成之后得到一个文件夹,保留以css结尾和ttf结尾的两项 二.利用HBuilder创建一个项目 1.用模板创建好项目 2.在根路径下创建common，并放入.css和.tff的文件 3.删除一些无关的文件 1.common.vue 2.一些路径的配置在pages.json里面会自动生成 4.在iconf...
uni-app使用iconfont-字体图标
程序员劝退师的博客
08-06 2179
1.挑选需要的iconfont图标 阿里iconfont开源库 2.添加购物车 不亏是做电商的，这里也像购物一样！ 可以多选几个方便后面的测试效果！ 3.下载代码 4.解压文件 5.导入项目 创建static/font目录，将iconfont.css、iconfont.ttf导入到static目录中 6.修改iconfont.css文件 源文件 这时候编译会不通过！会提示svg、truetype、woff…找不到！那就将这几个去掉！ 其他几个报错的文件是没有引进来，那是其他平台兼容问题的，移动端
使用uni-app搭建的企业OA app
03-23
在实现企业OA app的功能时，开发者可能会用到uni-app的组件如`uni-forms`（表单）、`uni-grid`（网格）、`uni-swiper`（轮播图）等，以及uniCloud（阿里云提供的云端服务）来实现数据的存储和同步，确保多平台的数据...
uni-app跨平台开发
o1dkdj的博客
06-15 794
Uni-app 框架提供了许多平台原生的 UI 控件和 API 的访问，但是这些控件和 API 在不同平台之间的支持和表现情况会有所不同，因此我们需要注意在编写代码时尽量避免使用不同平台独有的 API 或特性，同时要特别关注不同平台之间的差异，以便在不同平台上运行时代码能够正确地工作。Uni-app 运行在多个平台上，每个平台的特点是不同的。最后，总体来说，Uni-app 的跨平台开发提供了许多可能性和便利性，但也需要在搭建过程中注意兼容性问题，同时进行版本控制和测试，从而确保应用程序能够稳定地运行。
uni-app实现自定义导航栏并使用阿里小图标
weixin_42738839的博客
06-08 1110
首先下载阿里小图标，将选好的小图标添加入库，选择下载代码 将下载好的代码解压， 将iconfont.ttf文件拷到static文件夹下，打开iconfont.json找到对应的unicode 在main.json里面设置"navigationStyle": “custom”,对应的引入图标的text是在unicode前面加/u,比如“\ue503”,fontSrc为iconfont.ttf的路径，fontSize为图标大小，color为图标颜色 { "pages": [ //pages数组中第一项表.
uni-app中使用iconfont字体图标
asteriaV的博客
03-24 2160
在一些项目中，我们需要使用阿里巴巴矢量字体图标库的图标，如果单个下载势必过于麻烦，这个就是自己创建好然后进入即可。 第一步，找到阿里巴巴矢量字体图标库，登录官网 把你需要的图标添加至购物车，创建项目 第二步，进入项目，首先选择Unicode,然后点击下载至本地 第三步，找到该文件，解压，然后把该解压好的文件放到所需项目的static文件里 第四步，找到你刚才引入的图标文件（i...
uni-app字体图标及设置背景图片
最新发布
2201_76007015的博客
06-15 403
从网上下载合适的字体图标库，例如阿里巴巴矢量图标库（https://www.iconfont.cn/）中的字体图标库。将下载的字体图标库文件解压，将其中的字体文件（通常是一个后缀为.ttf的文件）复制到刚才创建的fonts文件夹中。通过以上步骤，就可以在uni-app中使用字体图标了。注意：这里的是字体图标对应的Unicode值，可以在下载的字体图标库中找到相应的Unicode值。在项目中找到static文件夹，创建一个新的文件夹，例如fonts，用来存放字体图标相关文件。
学习笔记——uni-app中如何使用字体图标
qq_41339126的博客
12-04 2507
在使用uni-app开发时，有时会用到字体图标，使页面更漂亮。这里主要使用的是阿里图标库。 1.下载并将字体图标放到项目中： 可以直接到阿里字体图标库中下载。 将解压好的文件中的六个文件放到项目中去。一般放到static文件夹下 2.修改iconfont.css文件： 不能直接使用，需要先配置一下。在iconfont前面加入~@/static/font/ 3.全局使用字体图标： 如果想在整个项目中都可以使用字体图标，则需要在App.vue中导入 ...
uniapp添加阿里字体图标库图标
beConcentration的博客
01-05 589
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode->查看在线链接的@font-face并替换iconfont.css的@font-face，并在每个链接前添加https: 3.本地图标方式 iconfont.css中用下方代码替换@font-face @font-face { font-family: 'iconfont'; src: url('@/styl
uniapp如何引入阿里字体图标
weixin_45799605的博客
03-21 1854
下载后的模板 将其引入到项目static目录创建font目录下 一定要创建一个目录 不然会出问题… 接下来看官方文档注意这三点 打开demo.html //右边 { "color": "#FFFF00", "float": "right", "fontSize": "40px", "fontSrc": "/st...
uni-app 使用阿里图标字体
qyx189573的博客
06-04 1080
1.先下载阿里图标 把想要的图标，添加到购物车中，并下载代码。 2.拷贝 把代码中的这几个文件拷贝到项目中 在main.js 中引入css import '@/common/font/iconfont.css' //页面使用 <textclass="iconfont icon-radiochecked"></text> //iconfont 图标 icon-radiochecked 图标名 ...
uniapp——如何在项目中使用阿里字体图标
qq_51480864的博客
02-11 1388
如何在uniapp中使用阿里字体图标
uniapp引入字体图标
09-24
在uni-app中引入字体图标，首先需要下载并将字体图标放到项目中。通常情况下可以使用阿里图标库，下载所需的字体图标文件并将其放到项目的合适位置。然后，在App.vue文件中导入字体图标的CSS文件，可以通过在<style>标签中使用@import来导入，例如@import url('static/font/iconfont.css')。这样就可以在整个项目中都使用字体图标了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值