「uniapp」自定义iconfont

皮卡皮卡皮
• 阅读 2079

1. 进入阿里图标库

「uniapp」自定义iconfont

2. 搜索自己需要的图标

点击加入购物车中 「uniapp」自定义iconfont

3. 将购物车中的图标添加到项目中

首先进入购物车 「uniapp」自定义iconfont 点击添加至项目,没有项目就新建一个项目 「uniapp」自定义iconfont

4. 将图标下载至本地

「uniapp」自定义iconfont

5. 将文件复制到uniapp项目中

「uniapp」自定义iconfont

「uniapp」自定义iconfont

// 将.ttf文件 @/common 引入
@font-face {
  font-family: "iconfont"; /* Project id 2570483 */
  src: url('@/common/iconfont.ttf?t=1621932269219') format('truetype');
}

6. 在app.vue 中全局引入iconfont.css

「uniapp」自定义iconfont

@import url("./common/iconfont.css");

7. 在页面中使用 iconfont 图标

<!-- 第一种 font class  -->
<text class="iconfont icon-youhuiquan" style="color: #F0AD4E; font-size: 80rpx;" ></text>
<!-- 第二种 Unicode -->
<text class="iconfont" style="color: #F0AD4E; font-size: 80rpx;" >&#xe608;</text>

8. 在模拟器中显示结果

「uniapp」自定义iconfont

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
她左右 她左右
3年前
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库加入购物车购物车下载代码图标文件内容2.、进入导入第
CuterCorley CuterCorley
3年前
uni-app入门教程(9)字体库、自定义组件、打包和新闻实战
前言本文主要介绍了4方面内容:在uniapp项目中使用iconfont提供的图标字体库,美化页面;实现自定义组件,并且可以自定义属性和实现父子组件之间的消息传递;微信小程序预览和真机测试,APP端云打包和本地打包;新闻列表和详情实战练习。一、使用iconfont字体库uniapp中可以使用iconfont()提供的图标字体。大致过程如下:
Souleigh ✨ Souleigh ✨
3年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
3年前
JOptionPane修改图标
1.在Linux平台下.JOptionPane会显示Java默认的图标,在window平台不显示图标,如何替换这个图标了?2JOptionPane.setIcon(Icon)修改的是内容区域的icon,而不是左上角的Icon.所以需要通过修改Jdialog/Frame的图标来达到修改默认图标的问题.3.代码:if(JOptio
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Stella981 Stella981
3年前
Eclipse 中的Maven常见报错及解决方法
1.不小心将项目中的MavenDependencies删除报错!(https://oscimg.oschina.net/oscnet/fd35e500e2580bca2afb81f35233b87a6ee.png)项目报错:!(https://oscimg.oschina.net/oscnet/8623bd4293fea39ca83a6
皮卡皮卡皮
皮卡皮卡皮
Lv1
十年旧梦无寻处,几度新春不在家。
文章
8
粉丝
2
获赞
6