Uni-App - 使用 iconfont 图标或者自定义图标

简介: Uni-App - 使用 iconfont 图标或者自定义图标

一、阿里巴巴图标矢量库

注意事项:

1、修改项目内的图标字体名称(iconfont 是 uni 的关键字暂不能用)。

2、使用网络字体。


image.png


二、项目使用

1、拷贝iconfont.css 文档到项目中,并修改引入的字体路径


@font-face {font-family: "eosfont";
  src: url('https://at.alicdn.com/t/font_943490_fdgw8vjcnhp.ttf') format('truetype'); 
}
.eosfont {
  font-family:"eosfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2、在app.vue中引入,即可全局使用

<style>
  /* uni.css - 通用组件、模板样式库,可以当作一套ui库应用 */
  @import "./common/uni.css";
  @import "./common/eosfont.css";
</style>

3、组件中使用字体图标

<text class="eosfont">&#xe61d;</text>

4、效果图

image.png

image.png

目录
相关文章
|
6月前
|
编解码 Android开发 iOS开发
如何解决App Store Connect中的“90704”图标错误的问题
如何解决App Store Connect中的“90704”图标错误的问题
30 0
|
1月前
uni-app 图标按钮组件封装(4.2)
uni-app 图标按钮组件封装(4.2)
20 0
|
2月前
|
Android开发 iOS开发 开发者
点击APP的应用程序图标后,发生了什么
点击APP的应用程序图标后,发生了什么
|
4月前
|
机器人 Android开发 数据安全/隐私保护
Android App 导出APK安装包以及制作App图标讲解及实战(图文解释 简单易懂)
Android App 导出APK安装包以及制作App图标讲解及实战(图文解释 简单易懂)
110 0
|
4月前
Cordova APP 设置图标
Cordova APP 设置图标
|
9月前
|
双11 Android开发
Android动态来改变App桌面图标
其实对于这样的一个桌面图标更换,Android中为我们提供了AndroidManifest.xml里的<activity-alias>标签实现方式。
221 0
|
10月前
|
Java Android开发
Launcher点击图标启动App流程分析(基于Android N)2
Launcher点击图标启动App流程分析(基于Android N)2
104 0
|
10月前
|
监控 Java Android开发
Launcher点击图标启动App流程分析(基于Android N)1
Launcher点击图标启动App流程分析(基于Android N)
77 0
|
iOS开发
iOS更新iOS15.0后APP图标变网格空白问题
iOS更新iOS15.0后APP图标变网格空白问题的解决
330 0
|
11月前
|
编解码 Android开发 iOS开发
如何解决App Store Connect中的“90704”图标错误的问题
【摘要】 在iOS应用开发中,我们需要将应用程序打包成ipa包并上传到App Store Connect进行审核。相信很多开发者应该都有遇到“90704”错误。这会导致上传失败,通常是因为我们上传的应用程序图标不符合App Store Connect的要求。具体来说,App Store Connect要求应用程序图标的最小尺寸为1024x1024像素,如果我们上传的图标尺寸不正确,就会遇到90704错...

热门文章

最新文章