微信小程序(十二)在线图标与字体的获取与引入

注释很详细,直接上代码

上一篇

新增内容:
1.从IconFont获取图标与文字的样式链接
2.将在线图标配置进页面中(源码)
3.将字体配置进页面文字中(源码)
4.css样式的多文件导入
获取链接
1.获取图标链接

登入IconFont 点击跳转

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

温馨提醒:之后生成的图标名会以这里设定的名字为基准,建议在这里就修改为所需的名字,当然也可以在代码中修改每个图标对应的名字

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.获取字体链接

在这里插入图片描述
在这里插入图片描述

源码:

icontest.wxml

<!-- 引用俩图标演示一下 -->
<view class="iconPerson vip"></view>
<view class="iconPerson newer"></view><!-- 两种字体对比一下 -->
<view style="font-family: 'ali'; font-size: 100rpx;">123</view>
<view style=" font-size: 100rpx;">123</view>

icontest.wxss

/* 图标演示部分--------------------------------------------------------------------------------------- */
@font-face {/* 当你导入图标时,通常会使用自定义字体来显示这些图标(我们可以直接将它当作图标组来看待)font-family是导入的图标组的名字,可以修改,以免多个图标组冲突 */font-family: "iconPerson"; /* Project id 4410171 */src: url('//at.alicdn.com/t/c/font_4410171_5gfl2zrmwrq.woff2?t=1705200100361') format('woff2'),url('//at.alicdn.com/t/c/font_4410171_5gfl2zrmwrq.woff?t=1705200100361') format('woff'),url('//at.alicdn.com/t/c/font_4410171_5gfl2zrmwrq.ttf?t=1705200100361') format('truetype');}/* 自定义的类名,使用这个类即可使用对应的图标 */.iconPerson {/* 使用的图标组,修改图标组的名字时别忘了改这里 */font-family: "iconPerson" !important;/* 如果我在这个组里的图标需要不同的大小咋办eg. .vip:before {content: "\e632";font-size: 60rpx;//单独修改图标的大小}*/font-size: 16px;/*总体图标的大小在这里修改*/font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/* 可以给不同的图标命名,content对应着官网库里面每个图标的编号 */.vip:before {content: "\e632";font-size: 60rpx;}.newer:before {content: "\e6c5";}/* 字体演示部分------------------------------------------------------------------------------------------------- */
@font-face {/* font-family可以给字体修改名字 */font-family: "ali";font-weight: 300;src: url("//at.alicdn.com/wf/webfont/TTlODKEUIMcs/U4q2oNPji8tU.woff2") format("woff2"),url("//at.alicdn.com/wf/webfont/TTlODKEUIMcs/KT8uszguJRqf.woff") format("woff");font-display: swap;}

效果演示:

在这里插入图片描述




看到这里主张代码清晰的你应该还留有一个疑惑

所有样式全放这里,要是多些组别,维护起来岂不是特别麻烦

解决方法:类的导入(将字体图标的样式分门别类放在一个文件夹,需要哪个导入哪个)

语法:@import "相对路径";(记得加分号)

举个例子:

在这里插入图片描述

在这里插入图片描述
下一篇

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

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

相关文章

ABAP 状态栏排除某些按钮

ABAP 状态栏排除某些按钮 GUI State状态栏 在状态栏这里有这些按钮&#xff0c;现在在导出界面要排除掉这些按钮&#xff1a; 将要排除的按钮追加到gt_code内表&#xff1a; gt_fcode功能码内表的定义 DATA:gt_fcode TYPE TABLE OF sy-ucomm,完整程序 *&---------…

tomcat、mysql连接数配置

&#xff08;1&#xff09;springboot tomcat连接数配置 server.tomcat.max-connections10000&#xff0c;最大被连接数&#xff0c;默认10000 server.tomcat.accept-count100&#xff0c;等待队列长度&#xff0c;默认100 server.tomcat.max-threads200&#xff0c;最大的工作…

上位机图像处理和嵌入式模块部署(python opencv)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们谈到了qt&#xff0c;谈到了opencv&#xff0c;也谈到了嵌入式&#xff0c;但是没有说明python在这个过程当中应该扮演什么样的角色。open…

【Linux】Linux进程间通信

Linux进程间通信 一、进程间通信介绍1、概念2、进程间通信目的3、进程间通信的本质4、进程间通信分类 二、管道1、什么是管道2、匿名管道&#xff08;1&#xff09;匿名管道原理&#xff08;2&#xff09;pipe函数&#xff08;3&#xff09;匿名管道的使用步骤i、父进程调用pip…

Frontend - SASS / SCSS 文件使用

目录 一、安装所需依赖 1. django-compressor 2. django-sass-processor 二、settings.py 文件配置 三、html使用 1. 配置 2. 导入 一、安装所需依赖 1. django-compressor 2. django-sass-processor 安装依赖&#xff0c;可参考另一篇文章&#xff1a;Backend - 安…

【汇总】解决Spring-Web与Spring-WebFlux冲突

【汇总】解决Spring-Web与Spring-WebFlux冲突 问题发现问题解决问题一&#xff1a;The bean requestMappingHandlerMapping, defined in class path resource [org/springframework/web/reactive/config/DelegatingWebFluxConfiguration.class],问题二&#xff1a;The Java/XML…

贝叶斯增量式跨域适应:少样本 + 跨模态学习 + 知识保留和推断【fundus + OCT】,做视网膜病变

贝叶斯深度学习&#xff1a;增量式少样本学习跨域适应 贝叶斯多目标函数 跨模态学习 fundus OCT&#xff0c;做视网膜病变 核心思想设计网络&#xff1a;寻找分类模型、损失函数实验结果混淆矩阵与注意力图评估 总结 核心思想 论文&#xff1a;https://arxiv.org/pdf/2110.…

数学建模-------误差来源以及误差分析

绝对误差&#xff1a;精确值-近似值&#xff1b; 举个例子&#xff1a;从A到B&#xff0c;应该有73千米&#xff0c;但是我们近似成了70千米&#xff1b;从C到D&#xff0c;应该是1373千米&#xff0c;我们近似成了1370千米&#xff0c;如果使用绝对误差&#xff0c;结果都是3…

代码随想录算法训练营第32天 | 122.买卖股票的最佳时机II + 55. 跳跃游戏 + 45.跳跃游戏II

今日任务 122.买卖股票的最佳时机II 55. 跳跃游戏 45.跳跃游戏II 122.买卖股票的最佳时机II - Medium 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i…

关于前端脚手架的依赖升级和去风险版本可能遇到的问题

一、升级依赖版本 1、检查过时依赖 npm outdated 2、根据具体情况&#xff0c;选择安全更新或全部更新到最新版本 2.1 安全更新&#xff08;不破坏依赖间的联系&#xff09; npm update 2.2 全部更新到最新版本 首先输入命令&#xff1a; npx npm-check-updates -u 执…

订单系统设计与营销系统整合的全面探讨

在电商领域&#xff0c;订单系统的设计至关重要&#xff0c;涉及到用户体验、营销费用分摊、以及各种参数的校验。本文将从多个角度深入探讨订单系统的设计&#xff0c;包括与营销系统的整合、营销费用分摊&#xff0c;以及下单前的各种参数校验。 1. 订单系统与营销系统整合 …

算法训练营Day58(单调栈1)

说明 单调栈适合寻找一个元素左边或右边第一个比自己大或小的元素 其作用是用力存放之前遍历过的元素 单调递减的栈是求比其小的元素 单调递增的栈是求比其大的元素 739. 每日温度 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 提醒 今天正式开…

在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作

前言&#xff1a;什么是操作筛选器 操作筛选器是 ASP.NET Core Web API 中的一种过滤器&#xff0c;用于在执行控制器操作&#xff08;Action&#xff09;之前或之后执行一些代码&#xff0c;完成特定的功能&#xff0c;比如执行日志记录、身份验证、授权、异常处理等通用的处…

Java多线程--线程的生命周期

文章目录 一、JDK1.5之前&#xff1a;5种状态五种状态1、新建2、就绪3、运行4、阻塞5、死亡 二、JDK1.5及之后&#xff1a;六种状态 Java语言使用 Thread类及其子类的对象来表示 线程&#xff0c;在它的一个完整的生命周期中通常要经历如下一些状态。 一、JDK1.5之前&#xf…

搜狐新闻客户端使用Kotlin之后对JSON解析框架的探索

本文字数&#xff1a;7488字 预计阅读时间&#xff1a;45分钟 01 引言 自2017年Google发布Kotlin语言之后&#xff0c;Android开发由原来的Java开始向Kotlin过度&#xff0c;目前绝大部分Android开发岗位基本要求就是熟练使用Kotlin。事实上&#xff0c;很多有着多年历史的项目…

CAD-autolisp(二)——选择集、命令行设置对话框、符号表

目录 一、选择集1.1 选择集的创建1.2 选择集的编辑1.3 操作选择集 二、命令行设置对话框2.1 设置图层2.2 加载线型2.3 设置字体样式2.4 设置标注样式&#xff08;了解即可&#xff09; 三、符号表3.1 简介3.2 符号表查找3.2 符号表删改增 一、选择集 定义&#xff1a;批量选择…

npm sill idealTree buildDeps 安装踩坑指南

参考&#xff1a;https://www.yuucn.com/a/1565526.html https://blog.csdn.net/m0_65066691/article/details/128168066 https://blog.csdn.net/Johanna51/article/details/123360477 通过如下指令获得用户配置文件目录&#xff0c; 删除.npmrc文件 npm config get usercon…

开发手札:Github Timeout 22

今天&#xff08;2024.01.26日&#xff09;&#xff0c;提交github又出现了ssh connect timeout errorcode 22&#xff0c;不论是创建新的sshkey还是配置.ssh/config都没用。 偶然在知乎上看到了解决方案&#xff0c;只需要在host中添加&#xff1a; 140.82.113.4 githu…

【广度优先搜索】【拓扑排序】【C++算法】913. 猫和老鼠

作者推荐 【动态规划】【map】【C算法】1289. 下降路径最小和 II 本文涉及知识点 广度优先搜索 拓扑排序 逆推 LeetCode913. 猫和老鼠 两位玩家分别扮演猫和老鼠&#xff0c;在一张 无向 图上进行游戏&#xff0c;两人轮流行动。 图的形式是&#xff1a;graph[a] 是一个列…

【Go 快速入门】基础语法 | 流程控制 | 字符串

文章目录 基础语法值变量常量运算符指针new 和 make 区别 字符串byte 和 rune 类型 流程控制for 循环If else 分支switch 分支 基础语法 项目代码地址&#xff1a;02-basicgrammar 值 基本类型值 Go 最基础的数据类型&#xff0c;比如整型、浮点型、布尔型。 复合类型值 …