首页 > 编程语言 >uni-app小程序项目使用iconfont字体图标

uni-app小程序项目使用iconfont字体图标

时间:2024-09-29 10:02:37浏览次数:8  
标签:项目 app iconfont 字体 使用 uni 图标

前情

uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验非常棒,公司项目就是主推uni-app。

为什么要这么做?

  • 借助字体图标,我们可以如同操作文字一样操作字体图标。如,颜色的切换、大小的改变
  • 对字体图标进行放大不会出现失真、缩小不会浪费掉像素点
  • 对于小程序项目因单包体积最大是2M,而前端开发中最占用体积的就是图片资源,所以使用字体图标在一定程序上能减少图片使用,从而减小包体积
  • iconfont是国内有名气的且图标丰富的字体图标库,同时支持上传SVG定制专属于自己的图标库

使用主要步骤

点击网址:iconfont-阿里巴巴矢量图标库进入iconfont网站并登录账号

  1. 进入我的项目管理页并新建一个项目

前辍设置和Font Family可以自定义,一般保持默认即可,如果你项目中有多个字体图标那你就自定义了,这样以区分开来使用;

此处字体格式选Base64或者TTF都是可以的,但Base64的体积会比TTF大一些,特别当图标增多的时候,如果你项目图标比较少用Base64也是没有问题的,我选择的是TTF

  1. 添加图标

可以直接搜索使用现成的图标或者上传SVG生成自定义的图标,SVG文件有一定的规范要求,具体查看上传页面底部的详细说明

  1. 生成字体图标文件

图标zip包下载到本地后,解压后其中iconfont.ttf文件和iconfont.css文件是我们需要的,双击demo.html文件可以查看图标样式,可以作为使用的时候的参考对照

  1. 在项目根组件App.vue中引入iconfont.css文件
<script>
export default {
    onLaunch: function (e) {
        console.log('App Launch', e);
    },
    onShow: async function () {
        console.log('App Show');
    },
    onHide: function () {
        console.log('App Hide');
    },
    one rror: function(e) {
        console.log('---- App one rror ----:', e);
    }
};
</script>
<style lang="scss">
@import '@/static/font/iconfont.css';
...
</style>
  1. 在项目中使用

在项目中只需要添加iconfont icon-home样式名,CSS会通过伪元素插入图标,至此,你就可以愉快的在uni-app项目中使用字体图标了,通过修改字体颜色修改图标颜色,修改字体大小来修改图标大小,其中iconfont和icon-前辍就是在第1步建立图标项目的时候设置的Font Family和前辍

<view class="iconfont icon-home !zhs-text-[80rpx]"></view>
<view class="iconfont icon-setting zhs-text-[red]"></view>

扩展

如果你项目中使用了uni-app的官方扩展组件uni-icons,你可以更方便的使用iconfont字体图标,使用示例如下:

<uni-icons custom-prefix="iconfont" type="icon-search" size="30"></uni-icons>

注意

在uni-app小程序项目中使用字体图标和在普通web项目中使用字体图标区别不是特别大,唯一需要注意的点就是在字体文件的选择上,如果是web项目需要引入除ttf外的其它字体文件以保证兼容性;

维护比普通图片要稍微麻烦一些,如果你使用了iconfont字体图标,你后面图标管理必须依赖iconfont的管理平台,如果要添加、修改或者删除图标,你都得在iconfont管理平台处理好项目图标,再下载指定的文件替换项目中的旧文件,虽然官方有很多免费可用的图标,但以我开发经验来看,公司项目一般都会自定义图标,不会使用第三方的图标,如果想自定义自己的图标需要UI根据Iconfont规范出SVG文件再上传到iconfont平台后才能使用;

iconfont是需要账号登录的,最好是公司申请一个账号,全部人共用,这样可以避免因有人离职而导致项目中使用的字体图标无法维护的问题

标签:项目,app,iconfont,字体,使用,uni,图标
From: https://www.cnblogs.com/xwwin/p/18438974

相关文章

  • 【Unity】(UI)抽屉式折叠面板
    UI中实现一个抽屉式折叠面板成果展示Scene部分主要包括两个部分:Option和Content。option对应的是选项按钮;Content对应的是展开的内容;这里由于此篇写法的问题。需要将option中Button从0开始依次编号。物体请按照固定的距离进行摆放。如Option中每个子物体的位置分别为(0,0,0)(0,-......
  • 华为OD机试真题---手机App防沉迷系统
    题目概述智能手机在方便我们生活的同时,也侵占了大量时间。手机App防沉迷系统旨在帮助用户合理规划手机App使用时间,确保在正确的时间做正确的事。系统的主要功能包括:在一天24小时内,可注册每个App的允许使用时段。一个时段只能使用一个App,即不能同时注册多个App在同一时间段......
  • uniapp [安卓苹果App端] - 详细实现手机蓝牙连接打印机及打印票据小票/标签/面单/热敏
    前言网上的教程乱七八糟,文本提供优质示例代码。在uni-appApp端(安卓APP|苹果APP)开发中,详解实现“手机蓝牙连接并使用蓝牙打印机”,uniAppApp端手机使用蓝牙连接打印机进行打印的相关功能,uniapp苹果安卓app实现开启蓝牙并搜索附近范围的蓝牙打印机对接全流程,支持打印......
  • 海外盲盒APP系统:盲盒出海热潮下的选择
    近年来,盲盒市场展现出了强劲的发展态势,不仅在国内持续上演“盲盒热”,在海外市场中更是“一盒难求”!在盲盒出海的浪潮下,盲盒在国际市场中迅速火爆,一时席卷了全球市场。海外盲盒系统是企业拓展海外市场的一种新渠道,利用互联网的优势运营,根据当地的文化背景进行主题设计,打造出便捷、有......
  • 香香漫画app正版免费版下载-香香漫画app
    香香漫画app正版免费版下载-香香漫画app在数字媒体蓬勃发展的今天,网络成为了各种艺术形式展现自身魅力的舞台。作为其中一个重要的组成部分,漫画以其独特的视觉叙事方式吸引了无数读者的目光。香香漫画app正版免费版下载:http://xf.oubaidu.com/“香香漫画”作为一个新兴的漫......
  • JAVA_uniapp微信小程序获取手机号
    废话不多说封装好的代码和演示,开箱即用packagecom.ruoyi.system.util;importcom.alibaba.fastjson.JSONObject;importorg.springframework.stereotype.Service;importjava.io.BufferedReader;importjava.io.InputStreamReader;importjava.io.OutputStreamWriter;......
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4实现纯C# Unity热更新方案 (一)
    1.前言什么是热更新游戏或者软件更新时,无需重新下载客户端进行安装,而是在应用程序启动的情况下,在内部进行资源或者代码更新Unity目前常用热更新解决方案HybridCLR,Xlua,ILRuntime等Unity目前常用资源管理解决方案AssetBundles,Addressable,YooAsset等在这里我们采用HybridCLR......
  • 第五:APP弱网测试工具(QNET)
    一.目前在测试移动设备上进行弱网络专项测试的方案主要有两种1.通过Android设备连接到PC上进行弱网络测试1.1.比如Fiddler,Charles,NET-Simulator等1.2.基本思路是在PC上装个Fiddler网络抓包工具1.3.然后再将Android设备的网络代理到PC上1.4.通过在PC上的Fiddler在设置......
  • APP逆向实战:喜马拉雅(OLLVM混淆,字符串加密)
    喜马拉雅抓包:POST/mobile/login/pwd/v3HTTP/1.1Cookie:1&_device=android&fcecf4c4-5ddc-30e3-86b1-6e675f92bfd0&6.6.99;channel=and-f5;impl=com.ximalaya.ting.android;osversion=29;fp=009527657x2022q22564v0500000000000000000000000000000000000000;devic......
  • Vue3 + Pinia 仿抖音项目:移动端最佳实践,体验原生App般流畅
    嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法摘要:在移动端开发领域,Vue.js一直以其轻量级和易用性著称。今天,我们要介绍的是一个将Vue3和Pinia结合使用的开源项目——Douyin-Vue,这是一个模仿抖音(TikTok)的移动端短视频应用,展现了......