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

原创 已于 2023-07-05 15:44:14 修改 · 6.6k 阅读 · 38 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

于 2020-11-01 15:03:44 首次发布
博主因学习时网上缺乏uni-app引入矢量图的详细方法，故记录操作步骤。包括在官网下载图标文件，将六个文件放入项目，在全局App.vue中引入，解决引入报错问题，修改路径后即可在页面正常使用，通过复制对应类名调用图标。

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

uni-app引入字体图标

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

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

在这里插入图片描述

uni-app多端开发
weixin_43993776的博客
11-08 2428
开场白： 要是在 vscode 书写代码， 需要添加 几个插件来支持 uni-app。
uni-APP项目开发
m0_71540335的博客
06-14 1687
在项目中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静态资源目录，例如图片等。
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之引入字体图标
我心坚持
11-02 1041
一、将阿里图标https://www.iconfont.cn/下载下来的文件拷贝到项目 二、拷贝以下两个文件图标到static/font目录下 三、修改文件目录路径 四、在APP.vue全局中引入文件 五、使用，打开下载中的HTML，复制需要的代码（不要点，点，点） 在class中写入，一定要写上iconfont。 ...
UniApp 全局使用字体教程
最新发布
weixin_47873655的博客
11-08 747
UniApp 全局字体设置指南 在 UniApp 项目中实现全局字体统一： 1️⃣ 将字体文件（如 YouYuan.ttf）放入 /static/fonts/ 目录 2️⃣ 在 App.vue 中通过 @font-face 注册字体 3️⃣ 设置全局样式 font-family: 'YouYuan' 4️⃣ 注意不同平台路径写法差异（H5用/static/，App用@/static/） 5️⃣ 遇到问题可排查路径、文件名或重新打包 6️⃣ 支持单独页面使用或全局应用 ✨ 完成设置后，项目所有页面将统一显示指
uniapp开发项目引入字体图标
baidu_41899377的博客
07-20 743
1.交换两个变量的值 varapple1='青苹果'; varapple2='红苹果'; vartemp=''; temp=apple1; apple1=apple2; apple2=temp; console.log(apple1,apple2); ...
uniapp引入字体图标库
weixin_43709908的博客
04-17 912
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹，将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图标的引入，在页面中就可以进行使用了 ...
uniapp引入字体图标（手机，h5，小程序均能完美显示）
QZ9420的博客
01-17 1029
一、在iconfont官网下载字体图标： 选择第二个进行下载，不然会导致手机端无法显示 二、下载好的文档解压好后，放入static中： 三、打开font文件夹，复制iconfont.css，改个名字如下(在此我改的名字是icon.css): 四、打开复制好的icon.css，只保留含有base64的那个url 五、在App.vue中引入代码如下： <style> /*每个页面公共css */ @import url("./static/font/icon.css"); </st
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中使用字体图标？
08-05
在项目的`App.vue`文件中引入字体图标的CSS文件，以实现全局可用性： ```vue @import url('static/font/iconfont.css'); ``` 这样，项目中的所有页面都可以直接使用字体图标[^2]。 #### 使用字体图标 在页面中...
UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）
weixin_53221528的博客
12-28 1087
UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）
在uni-app 项目中引入字体图标
weixin_43628078的博客
04-11 314
在uni-app 项目中引入字体图标 将下载的字体图标中的iconfont.css文件，放到uni-app项目中的文件夹中，发生如下报错： 解决方案 打开iconfont.css文件，需要将其红色框起来的内容删除 删除之后效果如下，然后即可正常显示字体图标 ...
uniapp字体图标的使用步骤详细版【前端开发】
跳探戈的小龙虾的博客
01-04 2090
目录 I.字体图标去哪里找？ II.uniapp中使用字体图标的详细步骤 I.字体图标去哪里找？ 更新中ing... II.uniapp中使用字体图标的详细步骤
uniapp 引入 字体图标
qq_48596260的博客
01-08 500
打开 css文件夹将iconfon.css复制到uniapp项目存放在公共静态资源目录下。进入inconfont阿里巴巴矢量库官网，选中自己喜欢的图标，并创建项目。将后缀名为ttf的文件，复制到uniapp项目存放在静态资源目录下。进入项目，选着图标类型（font class）下载本地。
在uni-app项目中简单使用iconfont字体图标
yanyunqi02的博客
05-13 4979
简单的使用iconfont图标
uni-app字体图标引入
weixin_46932840的博客
03-10 135
uni-app字体图标引入 1.从阿里巴巴矢量图标库下载所需图标文件 官网链接：https://www.iconfont.cn/ 2.下载完成后解压如下 3.在项目中app.vue中引入 此方法全局引入，局部引入可在需要的页面下引入 @import url("./static/fonts/iconfont.css"); 4.配置字体文件 在url地址中加入你的字体文件存放路径以 ~@开头 配置之前： 配置之后 5.在页面上使用 class类的名称， 第一个为font-family ,第二个为 f
uniapp引入自定义图标
weixin_52102740的博客
07-24 1369
uniapp自定义图标
uni-app引入阿里字体图标库
qq_41578884的博客
08-26 674
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
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值