Layui 扩展字体图标

layui 目前(2020-06-28)提供了168个图标,但是很多时候这些图标中没有自己想要的,今天在项目中想找一个二维码的图标,但是在layui提供的图标中并没有,此时我们可以扩展图标(阿里巴巴矢量图标库 www.iconfont.cn)layui提供的图标也是取材于此

文章目录

        • 1. 进入阿里巴巴矢量图标库官网,登陆账号
        • 2. 下载图标
        • 3. 三种使用方式
        • 4. Font-class 使用示例

1. 进入阿里巴巴矢量图标库官网,登陆账号


阿里巴巴矢量图标库官网

https://www.iconfont.cn

任选一种方式登陆账号,必须登陆,否则无法进行下载

2. 下载图标


搜索想要的图标,滑过图标、加入购物车

点击 下载代码,得到一个zip压缩包

解压压缩包,得到一个文件夹

demo_index.html 示例文件,使用方法看该文件即可

3. 三种使用方式


  • Unicode 引用 (兼容性最好,单色图标)
  • Font-class 引用 (兼容性良好,单色图标,单色推荐)
  • Symbol 引用 (兼容性较差,彩色图标,彩色推荐)

a. Unicode 引用,相对来说较麻烦

b. Font-class 引用

需要修改图标类名或样式可在 iconfont.css 中修改

c. Symbol 引用,需要彩色图标时使用

4. Font-class 使用示例


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
	<i class="iconfont icon-erweima"></i>

	<br><br>

	<i class="iconfont icon-QQ"></i>

	<br><br>

	<i class="iconfont icon-weixin"></i>
</body>
</html>

个人技术博客:https://www.itqaq.com

热门文章

暂无图片
编程学习 ·

中断、异常、系统调用的概念

系统调用是由应用程序发起的,意思是应用程序主动向操作系统发出服务请求。 异常是由不良的应用程序发起的,意思是非法指令或者其他坏的处理状态,比如内存出错。 中断是由外设发起的,它来自于不同硬件设备的计时器或者网络的中断。
暂无图片
编程学习 ·

Web服务器防护技术你了解多少?

技术的迅速发展,给人们提供便利的同时,也给人们带来了威胁。通常情况下,黑客、病毒会利用系统的漏洞来进行网络攻击,如篡改网页、蔓延病毒等,从而造成用户信息的窃取、重要数据的破坏。因此,要对web服务器的安全问题引起足够的重视,要加大安全防护力度、构建安全防护系统…
暂无图片
编程学习 ·

Linux磁盘管理与文件系统

Linux磁盘管理与文件系统磁盘结构1.硬盘的物理结构2.硬盘的数据结构3.硬盘的接口fdisk命令mkfs命令mkswap 命令挂载、卸载文件系统 前言:管理磁盘是管理员的重要工作内容之一,此次将从磁盘的分区和格式化操作等方面,学习在linux系统中的磁盘和管理技术。除此之外,文件系统也…
暂无图片
编程学习 ·

【阿里云】学生成长计划领取资格考试答案分享

云计算及云服务器入门 刚刚尝试了阿里云的高校学生计划,完成身份和学生认证后出现了需要测试才能领取,没想到凭感觉还拿到了90分,科一科四都能过了哈哈,下面是分享,希望后半年能把这种好资源利用起来,真正学点吃饭的东西,正确答案加粗显示。 选择题单选 1.SQL语言的功能…
暂无图片
编程学习 ·

基于jupyter notebook的python编程-----Win10通过OpenCv-3.4.1进行人脸口罩数据集的模型训练并进行戴口罩识别检测

基于jupyter notebook的python编程-----Win10通过OpenCv-3.4.1进行人脸口罩数据集的模型训练并进行戴口罩识别检测目录一、OpenCv的下载及安装1、OpenCv的下载2、OpenCv的安装3、查看是否具有模型训练环境二、人脸口罩数据集的下载及处理1、人脸口罩数据集下载2、数据集重命名为…
暂无图片
编程学习 ·

Web自动化测试:页面元素的定位方法

这一节,我们介绍一下页面元素定位的八种方式和如何通过火狐和谷歌浏览器获取元素定位信息.页面元素的定位方法 html页面是有一个个的标签组成的,我们定位元素其实就是定位这些标签。首先来看一下有哪儿几种定位方式:idnameclass nametag namelink textpartial link textxpat…
暂无图片
编程学习 ·

字节,位,字长

文章目录位,字节,字长换算位字长字符,字符集,字符编码常见字符集的编码:ASCII 字符集:GB2312 字符集:GBK 字符集:BIG5 字符集:GB18030 字符集:ISO8859-1:Unicode 字符集:UTF-16 与 UTF-8:总结 位,字节,字长 位:bit 最小单元 又叫比特数.在数字世界里没有电影、…
暂无图片
编程学习 ·

spring-data-rest快速实现增删改查

spring-data-rest实现增删改查 - 项目相关依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.3.RELEASE</version><relativePath/> </parent>…
暂无图片
编程学习 ·

Linux下core dump学习

参考链接 在linux下开发时,如果程序突然崩溃了,也没有任何日志。这时可以查看core文件。从core文件中分析原因,通过gdb看出程序挂在哪里,分析前后的变量,找出问题的原因。 1 查看linux下core dump是否开启 在linux上coredump默认是关闭的,可以通过ulimit -c查看,如果输出…
暂无图片
编程学习 ·

Java中的递归

Java中的递归(涉及到面试)举个例子: package com.wang.digui; /* 递归*/ public class Demo {public static void main(String[] args) {int calcetor = calcetor(3);System.out.println(calcetor);}//算阶乘的public static int calcetor(int n){if (n == 1){return 1;}els…
暂无图片
编程学习 ·

java面试-JVM内存区域划分

JVM内存划分说到Java内存区域,刚开始接触java的人会下意识说出“堆栈”。这里要明确堆栈不是一个概念,而是两个概念,堆和栈是两块不同的内存区域,简单理解的话,堆是用来存放对象而栈是用来执行程序的。其次,堆内存和栈内存的这种划分方式比较粗糙,这种划分方式只能说明大…
暂无图片
编程学习 ·

mongoDB采坑

mongoDB采坑 安装问题没有权限参考 https://blog.csdn.net/qq_20084101/article/details/82261195
暂无图片
编程学习 ·

react中使用scss全局变量做留海屏幕适配

最近我的react工程需要做留海屏幕适配,用了公司的框架mtl(支持友空间),我们都知道现在大多数做留海适配都是在顶部设置25px的高度,那为什么做适配会用到scss全局变量呢? 答案就是方便!配置了全局变量后我们可以在想要的任何地方使用,设置使用css的calc动态计算一些宽度…
暂无图片
编程学习 ·

第四天:Spark Streaming

Spark Streaming概述 1. Spark Streaming是什么 Spark Streaming用于流式数据的处理。Spark Streaming支持的数据输入源很多,例如:Kafka、Flume、Twitter、ZeroMQ和简单的TCP套接字等等。数据输入后可以用Spark的高度抽象原语如:map、reduce、join、window等进行运算。而结果…
暂无图片
编程学习 ·

ConcurrentHashMap 在 Java7 和 8 有何不同?

ConcurrentHashMap 在 Java7 和 8 有何不同? 文章目录ConcurrentHashMap 在 Java7 和 8 有何不同?前言1.Java 72.Java 83.重要的方法回顾3.1 Node 数组3.2 put 方法3.3 get 方法4.对比Java7 和Java8 的异同和优缺点4.1 数据结构不同4.2 并发度4.3 保证并发安全的原理4.4 遇到…
暂无图片
编程学习 ·

深度学习~卷积神经网络(CNN)

卷积神经网络(Convolutional Neural Network,简化为ConvNet或CNN)是一种前馈神经网络,其中信息从输入到卷积运算符单向流动到输出[93]。reference:H. Cecotti and A. Graser, “Convolutional neural networks for p300 detection with application to brain-computer inte…
暂无图片
编程学习 ·

Echarts3 关系图-力导向布局图 使用参数

// 基于准备好的dom,初始化ECharts实例 var myChart = echarts.init(document.getElementById(main), macarons); // 指定图表的配置项和数据var option = {tooltip : {show : true, //默认显示showContent:true, //是否显示提示框浮层trigger:item,/…
暂无图片
编程学习 ·

IntelliJ IDEA全局内容搜索和替换

使用IDEA过程中,有时会在整个项目里或指定文件夹下进行全局搜索和替换,这是一个很方便功能。使用方法如下: 一、全局搜索 1、使用快捷键Ctrl+Shift+F打开搜索窗口,或者通过点击Edit–>Find–>Find in path打开搜索窗口2、搜索界面如下,主要分为上中下三部分,上部主…
暂无图片
编程学习 ·

SDL环境搭建

一、SDL简单来说SDL就是封装了复杂的音视频底层操作,简化了音视频处理的难度。主要用于游戏开发和多媒体开发领域。而且SDL是C语言编写,可以跨平台使用。二、环境搭建SDL的环境搭建及其简单,直接在官网下载开发库就可以了;下载地址:http://www.libsdl.org/download-2.0.ph…