uniapp关于iconfont字体图标使用

1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/),选择需要的图标添加到购物车

2、点开购物车,将图标添加到项目

3、点开项目,点击下载至本地,会得到一个download.zip包

4、解压download包

5、将包里的iconfont.css和iconfont.ttf文件分别放在以下目录,并在App.vue里引入iconfont.css

6、iconfont.css代码,注意src只保留.ttf后缀名代码,路径设置为iconfont.ttf文件放置路径

@font-face {font-family: "iconfont";/* Project id 4529577 */src: url('@/static/fonts/iconfont.ttf?t=1714373629688') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-search:before {content: "\e614";
}

7、使用代码,主要是引用iconfont icon-search样式,注意u-search的placeholder设置不了样式,所以重写样式处理

<template><view><!--这里主要是给u-search标签的placeholder添加字体图标,因为placeholder不能设置样式进去,所以在本类重写它原有的样式.u-search__content__input--placeholder达到效果,\ue614是图标的unicode编码,由\u加上.icon-search:before里的content的字符组成--><u-search v-model="queryParams.title" :clearabled="true" :showAction="false" margin="10px 10px 0px 10px"bgColor="#e7e6e4" searchIconColor="black" searchIconSize="14px" :label="location.address":placeholder="'\ue614 请输入关键词'" searchIcon="arrow-down" inputAlign="center" @search="onSearch" @clear="getList"></u-search><!--u--input标签的placeholder能设置样式,所以通过placeholderClass设置字体图标--><view style="margin: 10px 10px 10px;"><u--input type="text" placeholderClass="iconfont icon-search" placeholder="搜索..." /></view><!--给文字添加字体图标,使用class直接指定样式--><view style="margin: 10px 10px 10px;"><span class="iconfont icon-search">111</span></view></view>
</template><script>export default {data() {return {queryParams: {title: ""},location: {address: "城市"}}},methods: {getList() {},onSearch() {}}};
</script><style>page {height: 100%;background: white;}.u-search__content__input--placeholder {font-family: iconfont;}
</style>

8、效果图

9、tabbar使用iconfont字体图标(微信小程序不支持),page.json代码如下

{"tabBar": {"borderStyle": "white","backgroundColor": "white",//选中前文字颜色"color": "#3c9cff",//选中后文字颜色"selectedColor": "#3c9cff",//字体图标文件路径"iconfontSrc": "static/fonts/iconfont.ttf","list": [{"text": "首页","pagePath": "pages/tourism-tabbar/home/index","iconfont": {//选中前字体图标"text": "\ue614",//选中后字体图标"selectedText":"\ue614",//图标大小"fontSize": "16px",//选中前图标颜色"color": "#3c9cff",//选中后图标颜色"selectedColor": "#3c9cff"}}]}
}

10、微信小程序效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/5131.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java从菜鸟到高手①

目录 1.数据类型 2.定义变量 2.1.编码方式 2.2.布尔型变量boolean 2.3.隐式类型转化和强制类型转化 2.4类型提升 3.字符串类型 4.运算符 4.1.取余 4.2. &#xff0c;- 4.3逻辑运算&& || &#xff01; 4.4.位运算 4.5.条件运算符 1.数据类型 Java中&#…

2024智能科学与软件工程国际学术会议(ICISSE 2024)

2024智能科学与软件工程国际学术会议&#xff08;ICISSE 2024) 会议简介 2024智能科学与软件工程国际学术会议&#xff08;ICISSE 2024&#xff09;将在北京隆重举行。本次会议汇集了全球智能科学和软件工程领域的专家学者&#xff0c;共同探讨该领域的最新研究成果和发展趋…

超详细的Vue脚手架

文章目录 Node.js介绍安装快速入门控制台输出使用函数模块化编程 npm包管理器介绍命令初始化命令本地安装(了解)全局安装(掌握)批量下载淘宝npm镜像(建议使用) Webpack介绍安装快速入门方式一&#xff1a;webpack原始方式方式二&#xff1a;基于NPM方式 webpack-dev-server 开发…

2024年第十五届蓝桥杯江苏省赛回顾

呜呜呜~~~ 我在考完了后感觉自己直接炸了&#xff1a;好多学到的算法都没有用上&#xff0c;几乎所有的题目都是暴力的。。。 最后十几分钟对于一道dp算法终于有思路了&#xff0c;但是。。匆匆忙忙之间就是没有调试出来。&#xff08;还是交了一道暴力[旋风狗头]直接哭死~~&…

设计模式学习笔记 - 开源实战五(下):总结Mybatis中用到的10种设计模式

概述 本章再对 Mybatis 用到的设计模式做一个总结。它用到的设计模式也不少。有些前面章节已经经过了&#xff0c;有些则比较简单。 SqlSessionFactoryBuilder&#xff1a;为什么要用建造者模式来创建 SqlSessionFactory&#xff1f; 在《Mybatis如何权衡易用性、性能和灵活性…

鸿蒙内核源码分析(汇编基础篇) | CPU在哪里打卡上班

本篇通过拆解一段很简单的汇编代码来快速认识汇编&#xff0c;为读懂鸿蒙汇编打基础.系列篇后续将逐个剖析鸿蒙的汇编文件. 汇编很简单 第一&#xff1a; 要认定汇编语言一定是简单的&#xff0c;没有高深的东西&#xff0c;无非就是数据的搬来搬去&#xff0c;运行时数据主要…

高等学校数字化校园平台介绍

高等学校信息化建设已经进入到跨业务领域信息共享、建立全校统一集成的信息系统阶段&#xff0c;目标是实现整个学校的系统集成、信息共享与工作协同。因此&#xff0c;如何将众多应用系统中大量的信息进行科学、规范的定义和分类&#xff0c;使信息有序流通、保证信息的一致性…

IP定位技术企业网络安全检测

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显&#xff0c;成为企业运营中不可忽视的一环。在众多网络安全技术中&#xff0c;IP定位技术以其独特的优势&#xff0c;为企业网络安全检测提供了强有力的支持。本文将深入探讨IP定位技术在企业网络安全检测中的应用及其…

使用通义千问,识别需求文档中的输入输出信号存储到excel表格,完成对需求的初步分析

操作步骤如下&#xff1a; 第一步&#xff0c;提取需求的输入输出信号为json格式&#xff0c; 提示词如下&#xff1a; 车速自动闭锁 使能条件&#xff08;a&b&c&d&e&f&#xff09; a. 电源状态为 ON&#xff08;PowerMode ON&#xff09; b. 主驾门锁…

idm下载速度慢解决办法 idm批量下载怎么用 idm优化下载速度 Internet Download Manager解决下载速度慢的方法教程

IDM (Internet Download Manager)是一款兼容性大&#xff0c;支持多种语言的下载管理软件&#xff0c;它可以自动检测并下载网页上的内容&#xff0c;这正是这一优点&#xff0c;使得它受到了广大用户的喜爱。但是在下载的过程中&#xff0c;我们会遇到idm下载速度慢怎么回事&a…

ubuntu搭建node私库Verdaccio

ubuntu搭建node私库Verdaccio Verdaccio 是一个轻量级的私有 npm 代理注册服务器&#xff0c;它是开源的&#xff0c;可以帮助你设置和维护企业内部的 npm 包的存储库。使用 Verdaccio 可以让你完全控制包的发布流程、依赖关系以及访问策略。这篇文章将指导你如何在 Ubuntu 系…

【Elasticsearch】安装配置与使用

1 前期准备 1.1 环境准备 麒麟ARM 64位操作系统 1.2 安装包准备 Elasticsearch下载地址: https://www.elastic.co/cn/downloads/elasticsearch 2 部署elasticsearch 2.1 创建es专用用户 注意&#xff1a;ES不能使用root用户来启动&#xff0c;必须使用普通用户来安装启…

【百度Apollo】探索自动驾驶:小白教学如何使用 Dreamview 播放数据包

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、Dreamview 简介二、使用 Dreamview 具体步骤步骤一&#xff1a;进入 Apollo Docker 环境步骤二&#xff…

.net报错异常及常用功能处理总结(持续更新)

.net报错异常及常用功能处理总结---持续更新 1. WebApi dynamic传参解析结果中ValueKind Object处理方法问题描述方案1&#xff1a;(推荐&#xff0c;改动很小)方案2&#xff1a; 2.C# .net多层循环嵌套结构数据对象如何写对象动态属性赋值问题描述JavaScript动态属性赋值.net…

初步认识Vscode

4.26初步认识Vscode &#xff08;一&#xff09;快捷键的使用 1. 打开控制端 ctrl ~2. 结束终端 ctrl c3. 多行同时对齐输出 按住shift alt 光标多选4. 多行同时任意位置输出 按住alt 光标单点你想要输入的位置5. 代码太长了&#xff0c;想混行编辑 alt z6. 打开设置控制…

记录一次大数据量接口优化过程

问题描述 记录一次大数据量接口优化过程。最近在优化一个大数据量的接口&#xff0c;是提供给安卓端APP调用的&#xff0c;因为安卓端没做分批次获取&#xff0c;接口的数据量也比较大&#xff0c;因为加载速度超过一两分钟&#xff0c;所以导致接口超时的异常&#xff0c;要让…

【网络原理】TCP协议的相关机制(确认应答、超时重传)

系列文章目录 【网络通信基础】网络中的常见基本概念 【网络编程】Java网络编程中的基本概念及实现UDP、TCP客户端服务器程序&#xff08;万字博文&#xff09; 【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制&#xff08;CRC算法、MD5算法&#xff09; 文章目…

# 谷歌 Chrome 浏览器无法安装插件的解决方法

谷歌 Chrome 浏览器无法安装插件的解决方法 运用开发模式安装 安装步骤&#xff1a; 1、 将 XX.crx 插件的扩展名改成 .zip 或者 .rar 并解压到文件夹 XX 目录。 1&#xff09;如&#xff1a;下载的 前端框架 vue.js 插件 nhdogjmejiglipccpnnnanhbledajbpd-6.6.1-Crx4Chro…

面试重点2:网页访问不了,从服务器层面如何排查

从服务器层面排查网页访问问题可以按照以下步骤进行&#xff1a; 1. 检查网络连接 确保服务器的网络连接正常&#xff0c;可以通过 ping 命令测试网络是否通畅&#xff0c;例如 ping www.example.com。 2. 排查 DNS 问题 如果访问域名无法解析&#xff0c;可能是 DNS 配置问…

邦注科技即热式节能模温机 模温机的工作原理

模温机是一种用于控制模具温度的设备&#xff0c;主要用于塑料注塑、压铸、橡胶成型等工艺中。 其工作原理主要包括以下几个步骤&#xff1a; 加热阶段&#xff1a; 当模具需要加热时&#xff0c;双温模温机会启动加热系统&#xff0c;将热传导油或热传导水加热至设定温度。加…