技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-5.使用字体图标(iconfont)

简介: 如何正确使用字体图标

由于之前是做UI的,在之前的图标使用中,我都是直接将icon下载成png格式来做图,然后在网页中以img形式引入并显示。后来发现svg格式小一些,在网页中就用svg格式图标。
今天明白了阿里图标库真正的使用方法,没有使用过的朋友一起学习下。

1.找图标

在图标搜索引擎中找我们需要的图标,选中之后加入购物车:
在这里插入图片描述

2.下载图标代码

选出我们需要的几个图标后,找到购物车:
在这里插入图片描述
点击下载后下载的是压缩包,其中内容是css和字体文件:
在这里插入图片描述

3.使用字体图标

(1)将我们下载好的压缩包解压复制,到我们的项目中,改名为iconfont。
在这里插入图片描述
(2)在项目中引入iconfont的css文件

import './assets/iconfont/iconfont.css'

在web的main.js主文件中:
在这里插入图片描述
(3)使用iconfont
下载的文件中有一个html文件,打开观察图标名:
在这里插入图片描述
可以观察到其给我们自动生成了字体图标的类名和使用方法,我们接下载的使用就是通过类名引入字体图标。

<span class="iconfont icon-more"></span>

在这里插入图片描述
生成图标,对此类字体图标添加样式时与字体方法相同。
在这里插入图片描述
注:以后每次添加新图标,都需要在阿里图标中添加到购物车,重新下载所有文件替换之前下载到assets文件夹的iconfont文件。

相关文章
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
6月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
215 8
|
5月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
176 0
|
6月前
|
移动开发 JavaScript 前端开发
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发 开发者
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
877 14
|
12月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
226 0