微信小程序线上加载使用iconfont问题

news2024/11/20 9:30:41

1.在微信小程序根目录下创建style文件夹,里面再创建iconfont文件夹,用于放置iconfont图标文件和iconfont样式文件

 

2.给iconfont.wxss写样式(也可以下载iconfont代码,拷贝iconfont.css里的代码复制进去)

@font-face {
  font-family: "iconfont"; /* Project id 4251914 */
  src: url('//at.alicdn.com/t/c/font_4251914_74nkylmquia.woff2?t=1694676186559') format('woff2'),
  url('//at.alicdn.com/t/c/font_4251914_74nkylmquia.woff?t=1694676186559') format('woff'),
  url('//at.alicdn.com/t/c/font_4251914_74nkylmquia.ttf?t=1694676186559') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shanchu:before {
  content: "\e74b";
}

.icon-shezhi:before {
  content: "\e74c";
}

.icon-shouyefill:before {
  content: "\e750";
}

.icon-shouye:before {
  content: "\e751";
}

.icon-zuobiao:before {
  content: "\e769";
}

.icon-xiangyou1:before {
  content: "\e775";
}

.icon-xiangzuo1:before {
  content: "\e779";
}

.icon-xiangji1fill:before {
  content: "\e77e";
}

.icon-xiangji1:before {
  content: "\e77f";
}

.icon-yonghufill:before {
  content: "\e787";
}

.icon-yonghu:before {
  content: "\e788";
}

3.点击更新(生成代码)

4.复制线上链接到iconfont.wxss中,使用和

5.把iconfont引入微信小程序(在app.wxss)


6.iconfont在页面中的使用

<icon class="iconfont icon-followed"></icon>

ps:线下使用icon链接:解决微信小程序离线加载iconfont问题_微信小程序离线使用_theOtherSky的博客-CSDN博客

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

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

相关文章

深度学习-全连接神经网络-训练过程-模型正则与超参数调优- [北邮鲁鹏]

目录标题 神经网络中的超参数学习率超参数优化方法网格搜索法随机搜索法 超参数搜索策略粗搜索精搜索 超参数的标尺空间 神经网络中的超参数 超参数 网络结构&#xff1a;隐层神经元个数&#xff0c;网络层数&#xff0c;非线性单元选择等优化相关&#xff1a;学习率、dorpou…

【绝㊙️】三年开发内功心得

经典嵌套if-else问题 这个也是老生常谈问题了&#xff0c;不管哪里都能看到。 那如何解决 方法一&#xff08;重要&#xff09;&#xff1a; 如果逻辑分支过多&#xff0c; 即使你不解决嵌套if-slse&#xff0c;至少也要把每个 if的{}里的逻辑抽到一个独立的方法或者工具类…

NDK (ndk)报错 Unity requires NDK r19 (64-bit)(19.0.05232133)

一、介绍 在 Android 添加 NDK ndk 的时候&#xff0c;出现 Unity requires NDK r19 (64-bit)(19.0.05232133)。 二、环境 1、Unity 2020.3.48f1c1 2、Android NDK 配置 三、报错信息 NDK (ndk)报错 Unity requires NDK r19 (64-bit)(19.0.05232133) 四、解决方法 1、下…

GDB之解决ptrace反调试手段(八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

【Redis】Redis 通用命令、键的过期策略、渐进式遍历

文章目录 一、基础命令SET 和 GET 二、全局命令KEYSEXISTSDELEXPIRE 和 TTL经典面试题&#xff1a;Redis 中 key 的过期策略是怎么实现的TYPE 三、渐进式遍历 Redis 有许多种数据结构&#xff0c;但是这些数据结构的 key 的类型都是字符串类型的&#xff08;所以说&#xff0c;…

链表oj题 链表与LinkedList 栈的概念 队列的概念 树和二叉树

第 1 题&#xff08;编程题&#xff09; 题目名称&#xff1a; 求环的入口点 题目内容&#xff1a; 求环的入口点https://leetcode-cn.com/problems/linked-list-cycle-ii/description/ 第 2 题&#xff08;编程题&#xff09; 题目名称&#xff1a; 判断链表带环 题目…

利用python工具提取多个word中的图片和表格

1. 前言 由于工作因素&#xff0c;经常要对多个文档内容进行查重&#xff0c;文字类可以借助查重工具辅助&#xff0c;但图片和表格只能依靠鼠标滚轮还有笔者的打工眼。久而久之&#xff0c;眼睛废了&#xff0c;肩颈也吃不消了&#xff08;-.-&#xff09;。于是乎&#xff0…

指引型树型组件的封装

最近&#xff0c;由于业务的需要&#xff0c;需要做一个指向形树型组件。在寻找各种文章后&#xff0c;终于有了思路。&#x1f912;&#x1f912;&#x1f912; 树型组件的思路主要是递归。谈到递归&#xff0c;我们首先要有递归的出口。递归的出口就是没有孩子节点了。这个时…

微博情绪分类

引自&#xff1a;https://blog.csdn.net/no1xiaoqianqian/article/details/130593783 友好借鉴&#xff0c;总体抄袭。 所需要的文件如下&#xff1a;https://download.csdn.net/download/m0_37567738/88340795 import os import torch import torch.nn as nn import numpy a…

pyqt与opencv-qt冲突解决办法

问题&#xff1a;pyqt显示不出界面 问题分析&#xff1a; 根据报错可以看出程序找到了libxcb.so&#xff0c;但是由于某些原因并不能够调用该驱动&#xff0c;这是因为pyqt5与opencv里的qt差生了冲突&#xff0c;这说明opencv内部的插件与pyqt5所使用的插件不兼容&#xff0c;因…

Elasticsearch 快速开始

Elasticsearch 是一个分布式的 RESTful 风格的搜索和数据分析引擎。 查询 &#xff1a; Elasticsearch 允许执行和合并多种类型的搜索 — 结构化、非结构化、地理位置、度量指标 — 搜索方式随心而变。分析 &#xff1a; 找到与查询最匹配的十个文档是一回事。但是如果面对的是…

zemax场曲与消场曲

场曲&#xff0c;像场弯曲&#xff0c;指的是平面物体通过透镜系统后&#xff0c;所有平面物点聚焦后的像面和理想平面不重合。 呈现一个弯曲的像面 单透镜为例&#xff1a; 此时聚焦显然不在一个平面上&#xff1a; 点列图可以观察到场曲的存在&#xff1a; 我们引入实际图…

R拒绝访问的解决方案

Win11系统 安装rms的时候报错&#xff1a; Error in loadNamespace(j <- i[[1L]], c(lib.loc, .libPaths()), versionCheck vI[[j]]) : namespace Matrix 1.5-4.1 is already loaded, but > 1.6.0 is required## 安装rms的时候报错&#xff0c;显示Matrix的版本太低…

Linux日志管理-logrotate(crontab定时任务、Ceph日志转储)

文章目录 一、logrotate概述二、logrotate基本用法三、logrotate运行机制logrotate参数 四、logrotate是怎么做到滚动日志时不影响程序正常的日志输出呢&#xff1f;Linux文件操作机制方案一方案二 五、logrotate实战--Ceph日志转储参考 一、logrotate概述 logrotate是一个用于…

Java 华为真题-选修课

需求&#xff1a; 现有两门选修课&#xff0c;每门选修课都有一部分学生选修&#xff0c;每个学生都有选修课的成绩&#xff0c;需要你找出同时选修了两门选修课的学生&#xff0c;先按照班级进行划分&#xff0c;班级编号小的先输出&#xff0c;每个班级按照两门选修课成绩和的…

下载CentOS ISO镜像 (一)

总目录 https://preparedata.blog.csdn.net/article/details/132877836 文章目录 总目录一、下载CentOS 镜像 一、下载CentOS 镜像 官网下载&#xff1a;https://www.centos.org/download/ Centos Linux 和 CentOS Stream 的区别&#xff1a;https://www.centos.org/cl-vs-cs…

设计模式(2) - 创建型模式

创建型模式指的是 创建对象 或是 获取实例 的方式。 1、工厂模式 平时写一些简单的代码可能会直接用 new 创建出一个对象&#xff0c;但是实际在阅读一些功能比较多、规模比较庞大的工程时&#xff0c;可能会发现有多个类继承于同一个基类的情况&#xff0c;它们拥有同样的接口…

删除安装Google Chrome浏览器时捆绑安装的Google 文档、表格、幻灯片、Gmail、Google 云端硬盘、YouTube网址链接(Mac)

删除安装Google Chrome浏览器时捆绑安装的Google 文档、表格、幻灯片、Gmail、Google 云端硬盘、YouTube网址链接(Mac) Mac mini操作系统&#xff0c;安装完 Google Chrome 浏览器以后&#xff0c;单击 启动台 桌面左下角的“显示应用程序”&#xff0c;我们发现捆绑安装了 Goo…

ArcGis10.8安装教程!

1、找到arcgis10.8中文安装包和Crack破解文件夹 2、运行"ArcGIS.exe"程序&#xff0c;进入安装向导&#xff1b;默认路径点下一步 3、注意&#xff0c;需要Python 2.7、Numpy、Matplotlib的支持 4、建议取消此处的勾选&#xff0c;开始进行安装 5、安装完成 6、…

【npm】npm私有库的使用-绑定

注册npm账户 输入基本信息 验证 收一次性验证码 登录 本地绑定 全局绑定了其他的私有库 若要在专门发包的项目中&#xff0c;发包到自己的私有库&#xff0c;需要在项目文件夹中创建一个.npmrc文件 创建文件 可以直接在项目目录下输入touch .npmrc创建文件 文件内容 regi…