程序员经验分享-hwhale

IconFont使用方式简介

2023-05-16

一、在线引入方式

1.iconfont中选择需要的图标，加入购物车

图1

2.点击图1所示的购物车，弹出如图2所示的弹框。

依次点击 添加至项目---》选择需要添加的项目---》再点击确定,跳转到如图3所示的页面

图2

3.点击图3中 “unicode" "font class" "symbol"可以选择iconfont的引入方式。

图3

注：有些字体图标不能用symbol方式使用。

        点击图3所示的,"点击复制代码",ctrl+v，在浏览器中打开.js文件，即可查看，如果要使用的图标有对应的id，则可以用symbol方式使用，否则不可以用symbol方式。

图4

4.如图3所示，选择iconfont的引入方式后，点击”点此复制代码“，再ctrl+v粘贴到项目的全局样式文件中。

 其中 font class方式是.css文件----可以直接在浏览器中打开

symbol方式是.js文件------可以直接在浏览器中打开

5.全局引入iconfont.css样式文件

  如：vue项目一般在 main.js文件中引入

import "./assets/css/iconcss/iconfont.css";

6.使用iconfont：注使用方式和引入iconfont的方式要一致。

  1）unicode方式

     unicode使用图标,如：

<i class="iconfont">&#xe604;</i>

   2）font class方式

    通过class使用图标,如：icon-24px；

<i class="iconfont icon-24px"></i>

  字符串模板 动态引入字体图标

<div class="icon-wrap">
     <i :class="`iconfont icon${item.icon}`"></i>
 </div>

3）symbol方式  

    通过symbol和use标签使用,如：

<svg aria-hidden="true">
    <use xlink:href="#icon-sousuo"></use> 
</svg>

二、本地引入方式

 1. 步骤1-2和在线引入方式一致

 2.直接点击如图3所示的  ”下载至本地“ 按钮，下载文件。解压下载好的文件，存放在本地文件夹中。

    下载的字体图标文件一般包括以下几个文件，直接复制到项目下即可

3.使用方式和在线引入方式的步骤5、6一致。

4.本地引入，每次添加新图标时，都需要 重复步骤2，下载新的字体图标文件替换旧的字体图标文件（全部替换）

/*

希望对你有帮助！

如有错误，欢迎指正，谢谢！

*/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

iconfont

使用方式简介

IconFont使用方式简介 的相关文章

  • 【璀璨数海】第一期 隐函数定理

    隐函数定理 鸽了好久了 xff0c 大三生活真的好累啊 xff01 quad quad 前两天夏令营面试的时候被问到了隐函数定理 xff0c 特此专门写一篇博文来重新复习讲解一下隐函数定理的内容 定理内容 xff1a 假定

  • hive安装与配置

    hive的安装与配置 hive介绍 xff1a Hive是基于Hadoop的一个数据仓库工具 xff0c 可以将结构化的数据文件映射为一张数据库表 xff0c 并提供类SQL查询功能 准备工作 xff1a hadoop集群成功部署卸载自带的

  • 原生spark与pyspark使用比较

    pyspark与原生spark xff08 scala xff09 比较 在学习完spark这个优秀的计算框架后 xff0c 因为当时的学习使用了python api对spark进行交互 xff0c 编写spark的原生语言为sacla x

  • Spark基础测试题

    因最近学习了scala重温spark xff0c 本篇主要是spark rdd的基础编程题 原题目地址 xff1a 题目地址 数据准备 本题所需的数据 data txt 数据结构如下依次是 xff1a 班级 姓名 年龄 性别 科目 成绩 1

  • Spark基础练习系列

    因最近学习了scala重温spark xff0c 本篇主要是spark sql与rdd的基础编程题 第一部分SparkRDD xff1a 原题目地址 xff1a 题目地址 数据准备 本题所需的数据 data txt 数据结构如下依次是 xf

  • sparkstream消费kafka序列化报错

    本篇介绍在window运行环境下 xff0c 使用spark消费kafka数据遇到的几个坑 调试环境IDEA 依赖 span class token operator lt span dependency span class token

  • Hadoop的安装和使用

    前言 xff1a 这个Hadoop的安装和使用操作起来很容易出错 xff0c 反正各种的问题 xff0c 所以在实验过程中需要细心 重复 xff0c 有的时候是机器的问题 xff0c 还有配置的问题 下面我讲一下我遇到的坑 xff01 第3

  • 树莓派 | 解决VNC Viewer无法连接显示问题

    如果觉得本篇文章对您的学习起到帮助作用 xff0c 请 点赞 43 关注 43 评论 xff0c 留下您的足迹 x1f4aa x1f4aa x1f4aa VNC Viewer是一个很不错的远程桌面应用 xff0c 但是我们在树莓派中使用时

  • kubeadm部署k8s，coredns一直处于containercreating状态failed to find plugin “flannel“ in path [/opt/cni/bin]]

    问题 xff1a coredns始终处于containercreating状态 coredns镜像拉取不下来 xff0c 只能手动拉去之后修改tag进行解决这个问题 xff0c 具体步骤如下 xff1a span class token n

  • Docker Compose部署Springboot+Mysql项目

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 在上一篇文章Spring Boot Maven 43 Docker打包中 xff0c 我们实现了将Springboot项目源代码一

  • 华为交换机配置LACP模式链路聚合

    文章目录 1 拓扑图2 任务描述3 SwA配置4 SwB配置5 查看配置6 普通模式链路聚合演示 https blog csdn net qq 45042462 article details 120972306 1 拓扑图 2 任务描述

  • Linux 或 树莓派 4B 使用 apt 或 pip 安装 scipy

    下面的安装过程都是在树莓派4B上安装成功的 xff0c 记录一下 xff0c 仅供参考 python 3 7 使用 apt 安装 注 xff1a 这种好像python版本只能在3 8以下 xff0c 其他版本也可尝试 sudo apt ge

  • 树莓派4B 安装 sklearn

    本文记录在树莓派4B中安装sklearn库的步骤以及安装时遇到的问题 安装步骤 sudo pip3 install numpy 61 61 1 23 5 sudo apt get install python3 numpy python3

  • navicat连接mysql报错1251的解决方法

    navicat连接mysql报错1251的解决方法 1 新安装的mysql8 xff0c 使用破解版的navicat连接的时候一直报错 xff0c 如图所示 xff1a 2 网上查找原因发现是mysql8 之前的版本中加密规则是mysql

  • 一个简单的flask实例

    Flask是python编写的轻量级的web框架 span class token comment 导入Flask类 span span class token keyword from span flask span class toke

随机推荐

  • 基础命令（四）

    LINUX基础命令 xff08 四 xff09 一 Tail命令 1 tail使用方法 tail命令用途是依照要求将指定的文件的最后部分输出到标准设备 xff0c 通常是终端 xff0c 通俗讲来 xff0c 就是把某个档案文件的最后几行显

  • Snipaste常用快捷键（详细总结）

    Snipaste快捷键 xff08 详细总结 xff09 全局快捷键 全局操作截屏F1贴图F3退出当前截图Esc截屏并自动复制Ctrl 43 F1隐藏 显示所有贴图Shift 43 F3切换到另一组贴图Ctrl 43 F3 鼠标贴图相关操作

  • 4位数值比较器电路

    4位数值比较器电路 题目描述 xff1a 使用门级描述方式 xff0c 实现4位数值比较器 某4位数值比较器的功能如下表 96 timescale 1ns 1ns module comparator 4 input 3 0 A input

  • Maven项目pom.xml project标签爆红解决方法

    今天在打开项目的时候 xff0c 发现了一个Maven项目的问题 xff0c 在Maven项目的pom xml文件中 xff0c project标签爆出了一个错误 parent relativePath of POM com hrp spr

  • 人工智能学习笔记五——孪生神经网络

    本文将用孪生神经网络模型 xff0c 对手写数字集minist进行相似度比较 xff0c 用的框架是keras 如果还不清楚神经网络 xff0c 可以看一下这篇文章 神经网络 caodong0225 github io MNIST 是一个手

  • Docker Swarm实战初探

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 环境 宿主机 xff1a macOS 10 15 7虚拟机平台 xff1a Parallels Desktop 15 1 2虚拟机

  • 零基础DIY四轴飞行器超级详细保姆级教程（STM32F407ZGT6主控、WIFI图传、陀螺仪平衡、气压计/超声波定高、手机蓝牙控制等功能）

    前言 大四毕业后暑假没事做就花了一点DIY了一个四轴飞行器 xff0c 是比较大的那种F450机架 xff0c 不是那种PCB板做机架的小四轴 xff0c 因为我也是从零基础开始做的四轴 xff0c 现在就想把自己的过程写成博客分享在网上

  • shell教程

    shell 简介 Shell是一种脚本语言 xff0c 通常用于在Unix和类Unix操作系统上进行命令行交互 它是用户与操作系统内核之间的接口 xff0c 允许用户通过命令行或脚本文件来控制计算机上的操作 Shell程序通常用于执行复杂的

  • matlab画图常用函数image、imagesc、imshow区别

    1 image函数 从数组显示图像 xff0c 直接把矩阵中的值当作索引值 xff08 称为直接映射 xff09 xff0c 即数值1对应RGB1 xff0c 数值2对应于RGB2 xff0c 当小于1或大于64时表现为两端的颜色 语法1

  • 树莓派WiFi连接问题及网页打开问题的解决

    树莓派WiFi连接问题及网页打开问题的解决 一 问题描述 前一段时间在网上买了一个树莓派 4b计划做一个人脸识别的智能锁 xff0c 前一段时间整赶上期末考试 xff0c 挤时间做了做人脸识别以及人体红外感知模块 xff0c 大致能简单实现

  • C++11之正则表达式（regex_match、regex_search、regex_replace）

    在C 43 43 11中引入了正则表达式 字符规则 先来了解一下这个字符的含义吧 字符描述 转义字符 匹配字符行尾 匹配前面的子表达式任意多次 43 匹配前面的子表达式一次或多次 xff1f 匹配前面的子表达式零次或一次 m 匹配确定的m次

  • Java中Lambda表达式使用及详解

    Java中Lambda表达式使用及详解 前言 一 Lambda表达式的简介 Lambda表达式 xff08 闭包 xff09 xff1a java8的新特性 xff0c lambda运行将函数作为一个方法的参数 xff0c 也就是函数作为参

  • 栈的出栈次序及次序种类

    学过数据结构的程序猿应该都清楚 xff0c 栈是一种先入后出 xff0c 后入先出 xff08 LIFO xff09 的表 即插入和删除都只能在一个位置上进行 xff0c 即栈顶位置 对栈的基本操作有Push xff08 入栈 xff09

  • ANO匿名飞控时间片调度移植至普通STM32工程

    工程结构 时间片调度相关的代码位于SCHEDULER目录下的Scheduler和Task文件中 xff0c 匿名飞控原本的时钟由传感器输出的1ms脉冲实现的外部中断提供 xff0c 为使时间片调度算法可以用于一般的工程 xff0c 此处改为

  • for(let i in arr) for(let i of arr )与普通for循环的区别

    span class token keyword let span arr span class token operator 61 span span class token punctuation span span class tok

  • 执行webpack命令出错：无法识别webpack && Can‘t resolve ‘./src‘ in xxx

    一 webpack 无法将 webpack 项识别为 cmdlet 函数 脚本文件或可运行程序的名称 解决方案 xff1a 全局安装webpack 和webpack cli 命令 xff1a cnpm install webpack cli

  • 豆瓣API获取的图片不显示

    一 问题 xff1a 使用豆瓣API获取到的数据不能正常显示 二 解决方法 从控制台中查看图片的url地址发现 xff1a 同为一个网站提供的数据但是提供的url地址的域名却不同 这是不符合情理的 xff0c 因为为了使数据有规律 xff0

  • 使用 vue cli 的 vue serve命令单独运行.vue文件报错： Error: Cannot find module ‘@vue/compiler-sfc/package.json‘

    目录 一 问题 二 无需配置直接运行 vue文件 三 解决 1 详细错误 四 总结 一 问题 根据vue cli官方文档 https cli vuejs org zh guide prototyping html学习无需配置直接运行 vue

  • sass文件中使用深度选择器 /deep/不起作用

    目录 一 问题 二 原因 三 解决 使用deep深度选择器的基本步骤 四 总结 一 问题 1 想在当前的 vue文件中使用 deep 深度选择器修改第三库引入的组件或自定义组件的样式 xff0c 但是修改不成功 二 原因 1 自定义组件my

  • IconFont使用方式简介

    一 在线引入方式 1 iconfont中选择需要的图标 xff0c 加入购物车 图1 2 点击图1所示的购物车 xff0c 弹出如图2所示的弹框 依次点击 添加至项目 选择需要添加的项目 再点击确定 跳转到如图3所示的页面 图2 3 点击图

热门标签