css文字图标(阿里图标)使用及引入方式

news2024/11/25 8:14:51

首先打开 iconfont图标 网页 选择素材库中的单色图标库

在这里插入图片描述

选择自己需要用的图标

在这里插入图片描述
这里简绍四种类型的引入方式,其中是网页上的三种引入方式:

在这里插入图片描述

1. Unicode 使用方式

复制代码
引入样式 (这里是线上引入 通过网址引入的)

在这里插入图片描述
引入样式注意路径完整性
在这里插入图片描述
标签中间放入特殊字符 必须属性 标签类名 必须要是iconfont 文字图标添加完成
在这里插入图片描述

2. 引入 Font class 使用方式

下载需要的字体图标 把生成的文件夹拖入 编程工具 引入iconfont.css 这个文件
在这里插入图片描述
在这里插入图片描述
标签必须类名 iconfont 与你需要使用的图标类名(如上图) 文字图标添加完成
在这里插入图片描述

3. Symbol 使用方式

在这里插入图片描述
一般配合js使用 就不在css里介绍了 后续js里介绍

4. 伪元素引用 使用方式

首先 引入方式 本地引入(不会引入看 二)
标签必须类名 iconfont
在这里插入图片描述
添加伪元素 找到 iconfont.css文件中与阿里网页中对应的图标属性即可将文字图标添加完成

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

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

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

相关文章

如何在Forlinx OK3588-C EVK上安装OpenCV?

OpenCV(开源计算机视觉库)是一个开源计算机视觉和机器学习软件库。 OpenCV 广泛应用于计算机视觉、机器人、智能交通、医学成像、安全等领域。 Forlinx RK3588 EVK 是一款高性能嵌入式计算机,结合 OpenCV,可进行高效的图像和视频处…

七牛云面试复盘-实习后端Java开发 一面复盘 【已通过】

💪💪💪欢迎订阅本专栏,持续更新,本专栏内容为我参加的各个公司面试的复盘专栏。将完整记录面试细节问题。 七牛云面试 实习后端Java开发 一面 [视频面试] 首先自我介绍 我是XXX,来自XXX,XXXX。 面试官提问: 1.先问几个基础题,循序渐进的来哈,谈谈Java⾃动装箱…

IM6ull LCD 驱动

一 LCD 简介 LCD(Liquid Crystal Display),液晶显示器。LCD的构造是在两片平行的玻璃基板中放置液晶盒,下基板玻璃上设置TFT(薄膜晶体管),上基板玻璃上设置彩色滤光片,通过TFT上的…

IDEA 集成 GIT

文章目录 16.IDEA中使用GIT-基本操作-add与commit 掌握目标内容 17.IDEA中使用GIT-基本操作-差异化比较目标内容 18.IDEA中使用GIT-基本操作-版本回退及撤消目标内容 19.IDEA中使用GIT-远程仓库-创建与关联远程仓库学习目标: 20.GitLab使用介绍_项目、用户和组介绍(…

Spark环境搭建与使用

第4关:使用Maven对Java独立应用程序进行编译打包 目录 第4关:使用Maven对Java独立应用程序进行编译打包 任务描述 相关知识 Maven安装 编程要求 任务描述 本关任务:编写一个简单的应用程序simpleApp2(实现spark自带文件REA…

Git使用入门

文章目录 简介安装linux离线安装windows安装 用户配置简单使用设置用户名提交至暂存区提交delete变更git add . 与 git add * 向远程库pushpush -f 分支建空白分支分支合并分支冲突 从远程库pull当远程库版本跟本地仓库不一致直接pull尚未pull 暂存区文件移除gitignoregitignor…

DuDuTalk:人工智能时代,AI技术如何赋能销售?

在数字化时代,人工智能(AI)正悄然改变着我们的生活和工作方式。销售领域作为商业运营的核心,自然也不能幸免于AI技术的影响。通过应用人工智能,销售团队能够在客户关系管理、销售预测、个性化营销等方面获得巨大的优势…

保姆级AT32F437 配置RT-Thread 以太网(UDP/TCP Server)

好记性不如烂笔头,既然不够聪明,就乖乖的做笔记,温故而知新。 本文档用于本人对知识点的梳理和记录。 一、前言 ENV版本:v1.3.5 rt-thread版本:V5 开发板:雅特力AT32F437 AT-START-F437 二、ENV配置 E…

回顾 | Let's Learn .NET - Web 开发实战

点击蓝字 关注我们 编辑:Alan Wang 排版:Rani Sun Lets Learn .NET 系列 “Lets Learn .NET” 是面向全球的 .NET 初学者学习系列,旨在通过不同语言,帮助不同地区的开发者掌握最新的 .NET 开发知识与技能。 “Lets Learn .NET”系…

【云原生架构模式】库(Library ) vs 服务(Service ) vs Sidecar(边车)

所有软件应用程序都由可重用的元素组成。这些可重用元素的目标和功能从基础设施级别到安全级别到业务能力各不相同。本文的目的是比较用于构建和部署这些可重用元素的不同方法。 1. 库 这是重用代码的最广泛使用的方法。可重用代码作为库开发和发布。在这种方法中,客…

web前端开发工程师工作的岗位职责(合集)

web前端开发工程师工作的岗位职责1 职责: 1、根据设计图进行前端页面开发并设计编写业务交互脚本 2、优化前端页面,保证良好的用户体验以及不同浏览器的兼容性 3、web前沿技术研究和新技术调研,将主流的特效应用到业务场景中 4、配合后台…

政府关注 | 国家人社部报道盖雅工场以云服务助力劳动者灵活就业

党的二十大报告提出,「加强灵活就业和新就业形态劳动者权益保障」,为促进新就业形态规范健康发展指明了方向。近年来,随着数字经济快速发展,依托互联网平台的新就业形态脱颖而出,成为吸纳就业、提高劳动参与率、增加劳…

FFmpeg从入门到入魔(2):保存流到本地MP4

1 . FFmpeg裁剪移植 之前我们简单地讲解了下如何在Linux系统中编译FFmpeg,但是编译出来的so体积太大,而且得到的多个so不便于使用。本节在此基础上,将详细讲解在编译FFmpeg时如何对相关模块作裁剪以精简so的体积,并且编译只生成一…

【Flutter 组件】005-基础组件:单选、开关和复选框

【Flutter 组件】005-基础组件:单选、开关和复选框 文章目录 【Flutter 组件】005-基础组件:单选、开关和复选框一、概述二、基本使用1、开关代码示例运行结果 2、复选框代码示例运行结果 3、多个选项单选代码示例运行结果 4、多个选项多选代码示例运行结…

一次源码编译安装PostgreSql失败

需要perl;之前博文已提到;之前有一种编程语言叫perl,此perl应该不是那个;可到其官网下载,Perl Download - www.perl.org 安装时添加到环境变量; 可能是一个东西;有编程语言和工具;大…

怎样愉快的使用串口发送16进制数据并读取串口内容

像雷达 imu 陀螺仪一类的传感器,一般都是用的usb转串口和主机连接,然后通过串口读取传感器数据,串口是我们绕不过的一道坎,那我们就来继续手撕串口。 串口连接主机问题看上篇: 怎样愉快的连接使用usb转串口设备_JT_B…

WalxPlugin免Root框架使用详解和示例代码

2023年7月4日首发 WalxPlugin框架(以下简称WP框架)是一个不需要root权限就能使用的插件化模块,能够轻松实现在非root设备hook其它应用的调用和访问进程数据等功能。目前该框架已发布测试版。 一.WP框架工具包提供了以下几个模块&#xff1a…

5.8.5 TCP可靠传输(一)序号确认机制

5.8.5 TCP可靠传输(一)序号确认机制 TCP是可靠的传输层协议,主要通过序号确认机制、超时重传机制、定时器三个方面实现可靠传输。 一、序号确认机制 TCP将所要传送的整个的应用层报文看成是一个一个字节组成的数据流,并对每一个…

Cyclo(-Ala-Tyr),21754-26-7,环(丙氨酸-酪氨酸)二肽,由两个氨基酸通过肽键环合形成

(文章资料汇总:陕西新研博美生物科技有限公司小编MISSwu)​ 【产品描述】 Cyclo(-Ala-Tyr),环(丙氨酸-酪氨酸)二肽,环二肽由两个氨基酸通过肽键环合形成,在氢键相互作用驱动下具有较强的自组装倾向&#x…

python的作用域、globals()-全局变量 和 locals()-局部变量

目录 查看全局变量和局部变量 变量解析规则 变量生存周期 在python中,函数会创建一个自己的作用域,也称为为命名空间。当我们在函数内部访问某个变量时,函数会优先在自己的命名空间中寻找。 我们自己定义的全局变量均在python内建的globa…