基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome

news2024/11/25 5:44:05

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客

2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客

3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客

目录

六、第三方图标库FontAwesome

1 安装FontAwesome

解决报错:npm安装font-awesome失败

2 简单上手


六、第三方图标库FontAwesome

Element UI提供的字体图符:

由于Element UI提供的字体图符较少,一般会采用其他图表库,如著名的FontAwesome。

  • 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括大小、颜色、阴影或者其他任何支持的效果。
  • 是一套图标字体库及CSS框架,主要目的是和Bootstrap搭配使用,可以通过CSS提供的特性设置大小,颜色,阴影等

官网地址: Font Awesome,一套绝佳的图标字体库和CSS框架

1 安装FontAwesome

安装命令:

npm install font-awesome

安装成功后,前端项目中package.json会自动注册,

 

然后在main.js中添加导入,

import 'font-awesome/css/font-awesome.min.css'

解决报错:npm安装font-awesome失败

场景复现:我尝试使用安装Font Awesome,抛出错误,

原因:npm 安装方式不太好使

解决方法:使用cnpm 安装方式,

cnpm install font-awesome --save

安装成功后,前端项目中package.json会自动注册,

ok,问题解决。

2 简单上手

(1)打开图标库的页面:Font Awesome,一套绝佳的图标字体库和CSS框架

(2)打开随便一个组件,把下行代码粘贴到网页HTML代码的<template></template>部分中,(此处我是添加在了之前创建的testTable.vue组件中)

<i class="fa fa-camera-retro"></i> fa-camera-retro

 

在浏览器打开http://localhost:8080/进行访问,效果如下图所示: 

 

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

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

相关文章

vulnhub靶场NAPPING: 1.0.1教程

靶场搭建靶机下载地址&#xff1a;Napping: 1.0.1 ~ VulnHub直接解压双击ova文件即可使用软件&#xff1a;靶机VirtualBox&#xff0c;攻击机VMware攻击机&#xff1a;kali信息收集arp-scan -l上帝之眼直接来看看网站可以注册账号&#xff0c;那就先试试。注册完后登入哦。要输…

阿里面试之Hr面,这个套路把我坑惨了......

作为技术类的测试工程师面试&#xff0c;往往要经过多次面试才能拿到心仪的offer&#xff0c;这里面有技术一面、二面…&#xff0c;甚至总监面等&#xff0c;还有一个必不可少的就是HR面&#xff0c;一般HR会出现在你面试的最前面和最后面&#xff0c;前面是了解你的基本情况&…

NCRE计算机等级考试Python真题(六)

第六套试题1、算法的时间复杂度是指A.执行算法程序所需要的时间B.算法程序的长度C.算法程序中的指令条数D.算法执行过程中所需要的基本运算次数正确答案&#xff1a; D2、下列关于栈的叙述中正确的是A.在栈中只能插入数据B.在栈中只能删除数据C.栈是先进先出的线性表D.栈是先进…

JavaEE简单示例——MyBatis多对多关联映射

简单介绍&#xff1a; 在实际的开发中&#xff0c;多对多的查询也是非常常见的。比如一个订单可以有很多的商品&#xff0c;而一个商品也可以被很多的订单所包含&#xff0c;而这种时候&#xff0c;如果我们有需求查询某一个订单内包含的所有商品&#xff1b;或者查询购买这个…

本地启动nacos注册服务

1.下载启动nacos(我的路径2.D:\nacos-server-2.0.0\nacos\bin) 2.单点模式启动 startup.cmd -m standalone 3.打开本地服务mysql、redis 4.配置nacos Nacos <1>创建命名空间&#xff0c;名称和项目pom一致 <2>ncaos导入配置或新建配置 <3>修改配置&#x…

Java培训:深入解读函数式接口

函数式编程是一种编程规范或一种编程思想&#xff0c;简单可以理解问将运算或实现过程看做是函数的计算。 Java8为了实现函数式编程&#xff0c;提出了3个重要的概念&#xff1a;Lambda表达式、方法引用、函数式接口。现在很多公司都在使用lambda表达式进行代码编写&#xff0c…

花7000报了培训班,3个月后我成功“骗”进了阿里,月薪拿16K....

“月薪4000元不如报名学IT&#xff0c;挑战年薪百万”这是大多数培训班在互联网上宣传的口号&#xff0c;简单的16个字却戳中了很多人的痛点&#xff0c;同龄人买车买房&#xff0c;自己却拿着微薄的工资连好一点的房子都租不起&#xff0c;这句口号 彻底激起了底层员工的焦虑&…

Spring上下文生命周期

基于入口来分析 import org.springframework.context.annotation.AnnotationConfigApplicationContext; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration;Configuration ComponentScan public cl…

飞行机器人专栏(十)-- 异构多视角视觉系统

感知系统架构为满足天空端主控制器的诸如RGB-D图像处理等大容量数据吞吐、高速并行计算、实时运动控制以及通信和可视化任务的计算算力需求&#xff0c;同时优化功耗表现&#xff0c;采用了结构紧凑、功耗表现优异的边缘计算硬件NVIDA IJetson AGXOrin 。该开发者套件包含高性能…

Python学习笔记202302

1、numpy.empty 作用&#xff1a;根据给定的维度和数值类型返回一个新的数组&#xff0c;其元素不进行初始化。 用法&#xff1a;numpy.empty(shape, dtypefloat, order‘C’) 2、logging.debug 作用&#xff1a;Python 的日志记录工具&#xff0c;这个模块为应用与库实现了灵…

可用于标记蛋白质216699-36-4,6-ROX,SE,6-羧基-X-罗丹明琥珀酰亚胺酯

一.6-ROX&#xff0c;SE产品描述&#xff1a;6-羧基-X-罗丹明琥珀酰亚胺酯&#xff08;6-ROX&#xff0c;SE&#xff09;是一种用于寡核苷酸标记和自动DNA测序的荧光染料&#xff0c;可用于标记蛋白质&#xff0c;寡核苷酸和其他含胺分子的伯胺&#xff08;-NH2&#xff09;。西…

Git中遇到的问题

文章目录Clone克隆bytes of body are still expectedunable to access此文章是自己在Git操作时遇到的问题&#xff0c;先开个坑记录下来&#xff0c;如果以后还遇到了Git上的其他问题&#xff0c;会在后面进行添加。Clone克隆 bytes of body are still expected Clone失败信息…

【Redis】Java客户端JedisSpringDataRedis入门(三)

&#x1f697;Redis学习第三站~ &#x1f6a9;起始站&#xff1a;【Redis】概述&环境搭建(一) &#x1f6a9;本文已收录至专栏&#xff1a;数据库学习之旅 &#x1f44d;希望您能有所收获 在上一篇中我们学习了Redis常见命令的使用&#xff0c;显然&#xff0c;我们不可能一…

Day21【元宇宙的实践构想07】—— 元宇宙与人工智能

&#x1f483;&#x1f3fc; 本人简介&#xff1a;男 &#x1f476;&#x1f3fc; 年龄&#xff1a;18 &#x1f91e; 作者&#xff1a;那就叫我亮亮叭 &#x1f4d5; 专栏&#xff1a;元宇宙 0.0 写在前面 “元宇宙”在2021年成为时髦的概念。元宇宙到底是什么&#xff1f;元宇…

[架构之路-123]-《软考-系统架构设计师》-操作系统-2-操作系统原理 - 存储层次结构与存储管理(寄存器、Cache、MMU、内存、外存、页表)

前言&#xff1a;操作系统的本质就是创建一个并发的应用程序执行的环境&#xff0c;使得各种应用程序可以动态、共享相同的计算机物理硬件资源&#xff0c;计算机的三大物理资源包括&#xff1a;CPU内存外设应用程序&#xff08;管理应用程序&#xff09;&#xff1a;以进程和现…

线性代数学习-1

线性代数学习-1行图像和列图像行图像列图像总结本文转载于https://herosunly.blog.csdn.net/article/details/88698381 该文章本人认为十分有用&#xff0c;便自己敲一遍笔记加固印象原文链接 原文这个笔记感觉比我老师讲的更加透彻&#xff0c;清晰。很好的展示了线性代数的原…

【MySQL】数据库中锁和事务的相关知识点

1.事务的四大特点 原子性&#xff1a;事务中的所有操作要么都成功&#xff0c;要么都失败。所有的操作是一个不可分割的单位。一致性&#xff1a;一致性指的是事务执行前后&#xff0c;数据从一个合法性状态转移到另一个合法性状态。这个状态和业务有关&#xff0c;是自己定义…

基于ssm框架大学生社团管理系统(源码+数据库+文档)

一、项目简介 本项目是一套基于ssm框架大学生社团管理系统&#xff0c;主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目可以直接作为bishe使用。 项目都经过严格调试&#xff0c;确保可…

在线文本翻译能力新增14个直译模型,打造以中文为轴心语言的翻译系统

经济全球化的今天&#xff0c;人们在工作和生活中经常会与外语打交道。相较传播性较广的英语而言&#xff0c;其他语种的识别和阅读对大多数人来说是一件难事&#xff0c;此时就需要借助语言翻译软件来帮助理解。 华为 HMS Core 机器学习服务&#xff08;ML Kit&#xff09;翻…

JVM详解——内存结构

文章目录内存结构1、 运行时数据区2、虚拟机栈3、本地方法栈4、程序计数器5、 堆6、方法区7、运行时常量池8、内存溢出和内存泄漏9、 堆溢出内存结构 1、 运行时数据区 Java虚拟机在运行Java程序期间将管理的内存划分为不同的数据区&#xff0c;不同的区域负责不同的职能&…