uni-app引入字体图标详细步骤

已于 2023-07-05 15:44:14 修改
阅读量6.6k 收藏 37
点赞数 7
CC 4.0 BY-SA版权
分类专栏： uni-app 文章标签： uni-app
于 2020-11-01 15:03:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48653480/article/details/109426552
博主因学习时网上缺乏uni-app引入矢量图的详细方法，故记录操作步骤。包括在官网下载图标文件，将六个文件放入项目，在全局App.vue中引入，解决引入报错问题，修改路径后即可在页面正常使用，通过复制对应类名调用图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

之前自己在学习中不会引入矢量图，在网上搜索方法，没找到一个详细的，自己动手记录一下。

uni-app引入字体图标

1、在案例矢量图官网选择需要的图标进行下载
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
2、得到如下文件
在这里插入图片描述
3、将文件中的六个文件放进项目里面，就是下面截图的那六个即可
在这里插入图片描述
4、在全局App.vue中引入
在这里插入图片描述
引入后会报如下错误
在这里插入图片描述
5、解决方式
进入你引入的字体图标中的iconfont.css中注意下下图标红的地方路径需要修改一下就好了。
在这里插入图片描述
6、按照如下图的修改方式即可解决
~@：是固定写法
static：就是存放字体图标的文件的文件夹
icon：是字体图标的文件夹
在这里插入图片描述
7、然后就可以在页面正常使用了
在下载的字体图标的文件中店家那个html文件进入如下页面
在这里插入图片描述
复制你需要使用的字体图标对应的类名
在这里插入图片描述
iconfont必须加上，iconfont后面的类名就是你要使用的字体图标的类名

在这里插入图片描述

Uni-app介绍
2301_78388122的博客
06-19 1383
在Uni-app开发过程中，需要注意跨平台适配、组件复用、异步操作处理、性能优化、路由管理、调试和测试、文档和社区支持、兼容性考虑、UI设计和交互、安全性等方面。Uni-app的工程包含pages、static、components等目录和文件结构，通过配置App.vue、main.js、manifest.json、pages.json等文件来实现应用的配置和页面管理。这些目录和文件组成了一个Uni-app工程的基本结构，开发者可以在这个基础上进行开发，添加自己的页面和组件，并根据需要进行配置和扩展。
uni-app多端开发
weixin_43993776的博客
11-08 2094
开场白： 要是在 vscode 书写代码， 需要添加 几个插件来支持 uni-app。
uniapp引入字体图标（手机，h5，小程序均能完美显示）
QZ9420的博客
01-17 1003
一、在iconfont官网下载字体图标： 选择第二个进行下载，不然会导致手机端无法显示 二、下载好的文档解压好后，放入static中： 三、打开font文件夹，复制iconfont.css，改个名字如下(在此我改的名字是icon.css): 四、打开复制好的icon.css，只保留含有base64的那个url 五、在App.vue中引入代码如下： <style> /*每个页面公共css */ @import url("./static/font/icon.css"); </st
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
Uniapp——2. 引入自定义图标库
最新发布
weixin_63215361的博客
06-23 340
把iconfont.css文件内容全选出来，在common目录下建一个新的文件夹，名称叫 icon.css,然后将全选的iconfont.css文件内容粘贴到 icon.css文件里，第二步：添加好了所需图标后在右上角的购物车中查看，已入库的图标，然后在所选图标添加项目，然后再将你添加的项目下载到本地，然后就会得到一个一下载好的图标压缩文件。第一步：打开阿里巴巴矢量图标库：https://www.iconfont.cn/，并登录自己的账号，第五步：使用图标，打开我们本地解压好的图标文件，
uniapp之引入字体图标
我心坚持
11-02 1024
一、将阿里图标https://www.iconfont.cn/下载下来的文件拷贝到项目 二、拷贝以下两个文件图标到static/font目录下 三、修改文件目录路径 四、在APP.vue全局中引入文件 五、使用，打开下载中的HTML，复制需要的代码（不要点，点，点） 在class中写入，一定要写上iconfont。 ...
uniapp开发项目引入字体图标
baidu_41899377的博客
07-20 726
1.交换两个变量的值 varapple1='青苹果'; varapple2='红苹果'; vartemp=''; temp=apple1; apple1=apple2; apple2=temp; console.log(apple1,apple2); ...
uniapp引入字体图标库
weixin_43709908的博客
04-17 891
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹，将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图标的引入，在页面中就可以进行使用了 ...
uniapp字体图标的使用步骤详细版【前端开发】
跳探戈的小龙虾的博客
01-04 2001
目录 I.字体图标去哪里找？ II.uniapp中使用字体图标的详细步骤 I.字体图标去哪里找？ 更新中ing... II.uniapp中使用字体图标的详细步骤
uni-app-tabbar:uni-app底部初步实现（不支持小程序）
03-19
本教程将详细讲解如何在uni-app框架中实现底部导航栏，特别需要注意的是，此方法并不适用于微信小程序。 【uni-app】是一个多端开发框架，它允许开发者用一套代码同时构建iOS、Android、H5、微信小程序等多个平台的...
uni-app批量引入字体图标
12-25
如果你想在UniApp项目中批量引入字体图标，可以按照以下步骤操作： 1. **下载字体文件**：首先，从开源库如Font Awesome、Material Icons等网站下载你需要的字体文件，通常为.ttf或.otf格式。 2. **安装依赖**：...
uni-APP项目开发
m0_71540335的博客
06-14 1634
在项目中manifest.json文件可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等。阮一峰的flex教程：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。Vue官网：https://cn.vuejs.org/v2/guide/static静态资源目录，例如图片等。
UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）
weixin_53221528的博客
12-28 1006
UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）
在uni-app 项目中引入字体图标
weixin_43628078的博客
04-11 293
在uni-app 项目中引入字体图标 将下载的字体图标中的iconfont.css文件，放到uni-app项目中的文件夹中，发生如下报错： 解决方案 打开iconfont.css文件，需要将其红色框起来的内容删除 删除之后效果如下，然后即可正常显示字体图标 ...
uniapp 引入 字体图标
qq_48596260的博客
01-08 475
打开 css文件夹将iconfon.css复制到uniapp项目存放在公共静态资源目录下。进入inconfont阿里巴巴矢量库官网，选中自己喜欢的图标，并创建项目。将后缀名为ttf的文件，复制到uniapp项目存放在静态资源目录下。进入项目，选着图标类型（font class）下载本地。
在uni-app项目中简单使用iconfont字体图标
yanyunqi02的博客
05-13 4795
简单的使用iconfont图标
uni-app字体图标引入
weixin_46932840的博客
03-10 122
uni-app字体图标引入 1.从阿里巴巴矢量图标库下载所需图标文件 官网链接：https://www.iconfont.cn/ 2.下载完成后解压如下 3.在项目中app.vue中引入 此方法全局引入，局部引入可在需要的页面下引入 @import url("./static/fonts/iconfont.css"); 4.配置字体文件 在url地址中加入你的字体文件存放路径以 ~@开头 配置之前： 配置之后 5.在页面上使用 class类的名称， 第一个为font-family ,第二个为 f
uni-app引入阿里字体图标库
qq_41578884的博客
08-26 638
1.官方地址 2.阿里巴巴字体图标库使用方法 （1）.注册账号 （2）.创建项目 （3）.找到喜欢的图标 （4）.将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 （6）.将iconfont.css复制到项目中去 （7）.在app.vue引入 /* 引入的字体图标 */ @import './common/iconfont.css'; （8）.使用 <view class="iconfont icongengduo icon "></view> ...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值