技能学习:学习使用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文件。

相关文章
|
5天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【9月更文挑战第15天】在数字化浪潮中,Node.js作为一颗耀眼的星辰,为后端开发领域注入了活力与创新。本文将带你领略Node.js的魅力所在,探索其架构设计、性能优化及实战应用,让你在轻松愉快的氛围中掌握Node.js后端开发的精髓。
|
9天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你走进Node.js的世界,了解其背后的运行机制和实际应用。我们将从基础概念出发,逐步深入到实战应用,最后通过代码示例巩固学习成果。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
7天前
|
JavaScript 前端开发 API
深入浅出Node.js后端开发
【9月更文挑战第13天】本文将带你进入Node.js的世界,从基础概念到实际案例,深入浅出地探讨如何利用Node.js进行后端开发。通过本文的学习,你将了解Node.js的工作原理、核心模块、以及如何构建一个简单的Web应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
8天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
9天前
|
缓存 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你进入Node.js的世界,探索其背后的哲学、核心概念以及如何利用它来构建高效、可扩展的后端服务。无论你是前端开发者寻求全栈技能,还是后端开发者希望拓宽技术栈,这篇文章都将为你提供价值。我们将从基础讲起,逐步深入到实战应用,让你对Node.js有一个全面而深刻的理解。
20 2
|
9天前
|
Web App开发 JavaScript NoSQL
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为技术支柱之一,承载着数据处理和业务逻辑实现的重要任务。本文将通过浅显易懂的方式,带你走进Node.js的世界,从基础概念到实战应用,逐步揭开后端开发的神秘面纱。无论你是编程新手还是希望扩展技术栈的开发者,这篇文章都将为你提供有价值的指导和启示。让我们一起探索如何在不断变化的技术环境中,保持初心,寻找属于自己的方向,并成为希望在世界上看到的改变。
21 1
|
14天前
|
存储 JavaScript 安全
深入浅出Node.js后端开发
【9月更文挑战第6天】在数字化浪潮中,后端开发作为技术架构的支柱,承载着数据存储、业务逻辑处理和用户交互等核心功能。Node.js,作为一个轻量级、高效的JavaScript运行环境,已经成为许多开发者的首选工具。本文将深入探讨Node.js的基础知识、实战应用以及面临的挑战,旨在为初学者和经验丰富的开发者提供一份全面的指南。从搭建开发环境到部署应用程序,我们将一步步揭示Node.js的魅力所在,同时也会触及性能优化和安全防护等高级话题。无论你是初涉后端开发的新手,还是希望深化对Node.js的理解,这篇文章都将是你的宝贵资源。
|
17天前
|
JavaScript API 数据库
深入理解Node.js事件循环及其在后端开发中的应用
【9月更文挑战第3天】本文将深入浅出地介绍Node.js的事件循环机制,探讨其非阻塞I/O模型和如何在后端开发中利用这一特性来处理高并发请求。通过实际的代码示例,我们将看到如何有效地使用异步操作来优化应用性能。文章旨在为读者揭示Node.js在后端开发中的核心优势和应用场景,帮助开发者更好地理解和运用事件循环来构建高性能的后端服务。
|
17天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第3天】本文将带你走进Node.js的世界,通过深入浅出的方式,让你了解Node.js的基本概念、特性以及如何在后端开发中应用。我们将从Node.js的安装开始,逐步深入到异步编程模型、事件驱动机制等核心概念,最后通过一个简单的Web服务器示例,让你对Node.js有一个全面的认识。无论你是前端开发者还是后端开发者,只要你对Node.js感兴趣,这篇文章都将为你打开一扇新的大门。
|
21天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
47 0