前端开发如何在自己项目中引用iconfont图标

前端开发如何在自己项目中引用iconfont图标!下面展示一下,详细的引入步骤。

第一步,您需要注册一个会员账号登录进入。创建一个项目。

可以使用其他的平台账号登录,我选了是微信登录,不过他们还会要求你输入手机号,通过短信验证码完成身份验证后,才能正常登录成功。

创建自己的项目就行了。随便写了一个test的名字。

这是演示的,所以我只勾选到2个图标。作为演示使用。


如图,1,你可以选择在线引入,他们官方会给你提供一个引入的地址。默认是看不见的,你点击一下,打开那个图标就可以看见引入的地址信息了。复制地址,就可以在自己的项目里面引入使用了。

或者你喜欢下载到本地导入也可以的。

如图,我下载了一份到本地了,里面是一个压缩包。里面有2个文件是我们项目使用的。

第一个是iconfont.css。另外一个是iconfont.ttf

分别存入你的css文件夹下,和你的font文件下面。

我们下面演示的内容是使用的在线导入地址的模式。


如图,我们在index.html文件内加如了这个地址。就可以使用图标了。


使用方法很简单。我们使用的是:【<li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>】

使用i图标的模式做调用!前面的iconfont是固定的,不能改动。后面那个icon-user.是图标的名字。


如图,正常显示了这个图标。是一个小的人的形状。


声明:实际上项目可能会使用很多很多图标,你自己把它们都集中存入你的项目内就行了。

这样,就可以一次性全部加载过来使用了。我这里仅仅是教程,所以引用了2个而已。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

牛客网-----跳石头

题目描述&#xff1a; 一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行&#xff0c;河道中分布着一些巨大岩石。组委会已经选择好了两块岩石作为比赛起点和终点。在起点和终点之间&#xff0c;有N块岩石(不含起点和终点的岩石)。在比赛过程中&#xff0…

网络防御保护1

网络防御保护 第一章 网络安全概述 网络安全&#xff08;Cyber Security&#xff09;是指网络系统的硬件、软件及其系统中的数据受到保护&#xff0c;不因偶然的或者恶意的原因而遭受到破坏、更改、泄露&#xff0c;系统连续可靠正常地运行&#xff0c;网络服务不中断 随着数…

Oracle Linux 8.9 安装图解

风险告知 本人及本篇博文不为任何人及任何行为的任何风险承担责任&#xff0c;图解仅供参考&#xff0c;请悉知&#xff01;本次安装图解是在一个全新的演示环境下进行的&#xff0c;演示环境中没有任何有价值的数据&#xff0c;但这并不代表摆在你面前的环境也是如此。生产环境…

Linux下软件安装的命令【RPM,YUM】及常用服务安装【JDK,Tomcat,MySQL】

Linux下软件安装的命令 源码安装 以源代码安装软件&#xff0c;每次都需要配置操作系统、配置编译参数、实际编译&#xff0c;最后还要依据个人喜好的方式来安装软件。这个过程很麻烦很累人。 RPM软件包管理 RPM安装软件的默认路径: 注意&#xff1a; /etc 配置文件放置目录…

精益生产咨询背后的秘密:企业如何实现价值最大化

精益生产&#xff0c;起源于丰田生产系统&#xff0c;是一种集中于削减浪费、优化流程、提升顾客价值的生产方法。它的核心在于确保每一步生产过程都能为顾客创造价值。以下是实现精益生产咨询的详细步骤&#xff1a; 1.确定客户价值 一切从顾客需求出发。企业需深入理解顾客…

x-cmd pkg | dasel - JSON、YAML、TOML、XML、CSV 数据的查询和修改工具

目录 简介首次用户快速实验指南基本功能性能特点竞品进一步探索 简介 dasel&#xff0c;是数据&#xff08;data&#xff09;和 选择器&#xff08;selector&#xff09;的简写&#xff0c;该工具使用选择器查询和修改数据结构。 支持 JSON&#xff0c;YAML&#xff0c;TOML&…

如何正确利用点对点传输工具来传输文件

P2P技术作为一种创新的数据交换机制&#xff0c;近年来已经获得了广泛的关注和应用。这种技术通过直接在用户之间建立连接&#xff0c;绕过了传统的中心服务器架构&#xff0c;从而在数据传输效率和速度上实现了显著提升。然而&#xff0c;正如硬币有两面&#xff0c;P2P技术同…

Leetcode—23.合并 K 个升序链表【困难】

2023每日刷题&#xff08;八十三&#xff09; Leetcode—23.合并 K 个升序链表 算法思想 用容量为K的最小堆优先队列&#xff0c;把链表的头结点都放进去&#xff0c;然后出队当前优先队列中最小的&#xff0c;挂上链表&#xff0c;&#xff0c;然后让出队的那个节点的下一个…

Postman基本使用、测试环境(Environment)配置

文章目录 准备测试项目DemoController测试代码Interceptor模拟拦截配置 Postman模块简单介绍Postman通用环境配置新建环境(Environment)配置环境(Environment)设置域名变量引用域名变量查看请求结果打印 Postman脚本设置变量登录成功后设置全局Auth-Token脚本编写脚本查看conso…

C Primer Plus 第6版 编程练习 chapter 17

文章目录 1. 第1题1.1 题目描述1.2 递归方式1.2.1 源码1.2.1 结果显示 1.3 双向链表1.3.1 源码1.3.2 结果显示 2. 第2题2.1 题目描述2.2 编程源码2.3 结果显示 3. 第3题3.1 题目描述3.2 编程源码3.3 结果显示 4. 第4题4.1 题目描述4.2 编程源码4.3 结果显示 5. 第5题5.1 题目描…

UML类图学习

UML类图学习 UML类图是描述类之间的关系概念1.类(Class)&#xff1a;使用三层矩形框表示2.接口(interface)&#xff1a;使用两层矩形框表示&#xff0c;与类图主要区别在于顶端有<<interface>>显示3、继承类&#xff08;extends&#xff09;&#xff1a;用空心三角…

Python + Selenium —— ActionChains动作链!

当你需要执行复杂的操作时&#xff0c;比如将一个元素按住拖动到另一个元素上去&#xff0c;需要移动鼠标然后点击并按下键盘某个按键等等。 当然&#xff0c;在 Web 页面上&#xff0c;这种操作好像比较少。 但是&#xff0c;如果遇到了怎么办呢&#xff1f;这就需要用到 Ac…

【设计模式】字节三面:请举例阐释访问者模式

今天我们要一起探讨的主题是一种设计模式——访问者模式(Visitor Pattern)。我将从最基础的概念、应用场景&#xff0c;再到实例代码的展示&#xff0c;全方位的为大家剖析访问者模式。而且&#xff0c;我保证&#xff0c;你即使是编程新手&#xff0c;也能理解并开始应用这个设…

二、类加载、连接和初始化

1. 类从加载、连接、初始化&#xff0c;到卸载的生命周期及概述 加载&#xff1a;查找并加载 class 文件中的二进制数据 连接&#xff1a;将已读入内存的 class 文件的二进制数据合并到 JVM 运行时环境中去&#xff0c;包含如下几个步骤&#xff1a; 验证&#xff1a;确保被加…

自学网安-DNS

01DNS Domain Name Service域名服务 作用&#xff1a;为客户机提供域名解析服务器 02域名组成 2.1域名组成概述 如"www.sina.com.cn"是一个域名&#xff0c;从严格意义上讲&#xff0c;"sina.com.cn"才被称为域名(全球唯一)&#xff0c;而"www"…

finalshell连接linux的kali系统

kali的ssh服务似乎是默认关闭的&#xff0c;笔者在玩CentOS系统时可以直接用finalshell完成连接&#xff0c;但kali不行&#xff0c;需要先手动开启ssh服务。 开启kali的ssh服务 输入【ssh start】命令开启ssh服务&#xff0c;可以用【ssh status】命令查看ssh状态&#xff0c…

BL0942 内置时钟免校准计量芯片 用于智能家居领域 上海贝岭 低成本 使用指南

BL0939是上海贝岭股份有限公司开发的一款用于智能家居领域进行电能测量的专用芯片&#xff0c;支持两路测量&#xff0c;可同时进行计量和漏电故障检测&#xff0c;漏电检测电流可设&#xff0c;响应时间快&#xff0c;具有体积小&#xff0c;外围电路简单&#xff0c;成本低廉…

风丘车辆热管理测试方案

车辆热管理是在能源危机出现、汽车排放法规日益严格以及人们对汽车舒适性要求更高的背景下应运而生的。将各个系统或部件如冷却系统、润滑系统和空调系统等集成一个有效的热管理系统&#xff1b;控制和优化车辆的热量传递过程&#xff0c;保证各关键部件和系统安全高效运行&…

uniapp小程序实现自定义返回按钮和胶囊对齐 做到兼容各手机型号

效果&#xff1a; 用到的API&#xff1a; uni.getMenuButtonBoundingClientRect();官网地址&#xff1a; https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect 控制台打印&#xff1a; 代码示例&#xff1a; <template><view cl…

MNIST 数据集详析:使用残差网络RESNET识别手写数字(文末送书)

MNIST 数据集已经是一个几乎每个初学者都会接触的数据集, 很多实验、很多模型都会以MNIST 数据集作为训练对象, 不过有些人可能对它还不是很了解, 那么今天我们一起来学习一下MNIST 数据集&#xff0c;同时构建残差网络来识别手写数字。 1.MNIST 介绍 MNIST手写数字数据库具有…
最新文章