uni-app引入阿里图标【单色】
uni-app引入阿里图标【单色】
上期简单的介绍了一下uni-app
相信大家根据官方文档都已经了解的差不多了,创建项目应该是没有什么问题了,那么这期我就讲一下在uni-app
怎么引入阿里图标——单色
之前文章中我有讲到小程序原生引入阿里图标,如果大家感兴趣的话可以看一下。uni-app
引入阿里图标和小程序原生引入还是很不一样的
话不多说,开始!
第一步:进入阿里图标官网https://www.iconfont.cn/选择自己需要的图标,当然你也可以让你们ui把设计图上的图标上传到阿里图标
上
第二步:添加至项目
点击购物车
出现
点击添加至项目
后出现文件夹选择或者是新建一个文件夹,在这里我就先新建一个文件夹
点击确认
以后,就可以看到自己的文件夹里的内容,在这看到的就是自己所有icon的项目
上面是阿里图标
的基本操作,我又啰嗦了一遍儿,怕有的新同学还不会用,下面进入主题
第三步:下载至本地,解压download
文件夹
点击下载至本地,并且在本地解压
解压出来的文件目录请看下图:
第四步:在项目中引入iconfont.css
第五步:把iconfont.ttf
转成base64
转base64网站链接https://www.giftofspeed.com/base64-encoder/
打开链接后点击选择文件
夹然后如下图
第六步:把base64
复制到项目iconfont.css
中并替换文件中@font-face
内容
刚开始iconfont.css
的内容如下
需要替换
成下面代码,因为什么要换这里不多讲,你换上就对了
@font-face {font-family: 'iconfont';src: url(data:font/truetype;charset=utf-8;base64,base64复制内容)format('truetype');
}
注意:base64复制内容
不可和前面base64,
换行
base64复制内容
要换成刚转换的内容如下
换后如下图
第七步:App.vue
文件中的<style>
中引入iconfont.css
<style lang="scss">@import '/static/font/iconfont.css';
</style>
完成上面步骤,配置
就完成了,下面使用就好了
第八步:页面中使用
<template><view class="icon"><i class="iconfont icon-chart-area" style="font-size: 50rpx;"></i><i class="iconfont icon-chart-line" style="color: red;"></i><i class="iconfont icon-chart-bar" ></i><i class="iconfont icon-display-code"></i><i class="iconfont icon-display-arrow-right"></i></view>
</template><script>
</script><style scoped lang="less">.icon{padding: 50rpx;i{padding: 20rpx;}}
</style>
解释
:
<i class="iconfont icon-chart-area" style="font-size: 50rpx;"></i>
iconfont
: iconfont对应的是iconfont.css
中
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
icon-chart-area
对应的是iconfont.css
中
.icon-chart-area:before {content: "\e78f";
}
那么可能就有同学问了怎么找到对应的icon名字icon-chart-area
可以去阿里图标你的项目文件中找到对应的 e78f
(只是举例其中一个),
这样就可以找到 对应的class名字了
图标的样式和字体设置一样
第九步:看效果
效果如下:
以上uni-app
引入阿里图标
就结束了 ,希望能够给大家带来帮助!如有什么问题及时反馈
。
uni-app引入阿里图标【单色】相关推荐
- 小程序以及h5引入阿里图标不显示最简单解决方案
小程序项目,按照老方法,图标部分手机不显示,经理炸毛,自己也头痛,网上搜了一大堆方法,有转化base64的,还有其他各种的,感觉太麻烦了也不好用,本人就讨厌麻烦,直男程序员一枚,今天花时间,认真研究了 ...
- vue 中引入阿里图标库,封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库 二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
- uniapp引入阿里图标
uniapp引入阿里图标: uniapp引入自定义阿里图标库后在手机端不显示图标 跟着我做: 第一步: 第二步: 第三步: 是的,你没看错,这样操作不太行,确实没有图标s #学习时间(正确): 第一步 ...
- 如何在React中引入阿里图标库的图标
一.周所周知 在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
- vue 外卖app(3) 引入阿里图标
1.登陆阿里图标官网 2.点击搜索按钮,输入你想要搜索的图标,加入购物车,保存到项目中 3.在项目中使用 转载于:https://www.cnblogs.com/guangzhou11/p/95744 ...
- uni-app引入阿里图标
个人博客 今天刚好用uni-app在开发一个多端应用,在开始引用图标时不知道如何引入多端应用的图标,后来用阿里图标解决了,在此记录下解决的方法 去阿里图标官网下载阿里图标,选择unicode 2.复制 ...
- Taro引入阿里图标
首先进阿里图标下载项目至本地 下载完解压缩打开后将以下文件复制出来 这边我在src下新建一个fonts目录,将上面复制下来的五个文件放到里面(目录名可以自己命名,或者放在其他目录下) 返回到上级也就是 ...
- 前端小知识:ElementPlus引入阿里图标使用(超详细-手把手教学)
文章目录 1. 下载阿里图标 2. 将下载的文件压缩放入到项目中 3. 直接本地打开压缩文件里面的使用Demo - demo_index.html 4. 根据上面的Demo提示,页面需引入文件里面的i ...
- React项目中如何结合antd引入阿里图标(外联方式)
在Raect项目中,图标的使用不可避免,如何使用根据antd来使用阿里图标库? 一.在阿里图标库中选中自己需要的图标存到自己的项目当中并下载至本地 二.1.在React项目的根目录下创建一个stati ...
- 小程序如何引入阿里图标。
1.将阿里图标加入购物车下载到本地,解压下载的文件,找到ttf后缀的文件. 2.通过https://transfonter.org平台将ttf转换成base64格式 3.把转换后的文件夹里的css后缀 ...
最新文章
- 物理学在计算机领域的应用,物理学在计算机中的应用.doc
- SpringBoot中常见的错误
- (30个原生js挑战)原生js实现钟表
- 【干货】如果你的推广周期是一年,怎样激活100万目标用户
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
- mongodb 搜索速度_MongoDB数据库查询性能提高40倍的经历分享
- 泛微数字化督查督办平台:不见面也能高效落实工作、管理到位
- 实现米思齐的数码管图形化编程
- [Windows] ISCSI发起程序实例不存在
- 2022软件测试校招笔试题-软件测试基本理论
- flutter中页面跳转之Navigator
- java为Word插入图片水印
- 关于电脑版/PC微信如何恢复聊天记录【实践可行】
- OC10-Block
- 数据可视化教程作业打卡-第四回:文字图例尽眉目
- 疫情之下,我们欠阿里华为腾讯一个热搜
- WPS中将公式居中,序号在最右边
- 软件工程导论---概述--软件危机
- 笔记九 :EgretH5通用MVC框架的操作:制作折叠菜单FoldList(UI部分)
- php网站漏洞检测对sql注入漏洞防护 1