当前位置: 首页 > news >正文

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

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/进行访问,效果如下图所示: 

 

相关文章:

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

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 目录 六、第三方图标库FontAwesome 1 安装FontAwesome 解决报…...

今天面了个腾讯拿25K出来的软件测试工程师,让我见识到了真正的天花板...

今天上班开早会就是新人见面仪式&#xff0c;听说来了个很厉害的大佬&#xff0c;年纪还不大&#xff0c;是上家公司离职过来的&#xff0c;薪资已经达到中高等水平&#xff0c;很多人都好奇不已&#xff0c;能拿到这个薪资应该人不简单&#xff0c;果然&#xff0c;自我介绍的…...

OSG三维渲染引擎编程学习之六十九:“第六章:OSG场景工作机制” 之 “6.9 OSG数据变量”

目录 第六章 OSG场景工作机制 6.9 OSG数据变量 第六章 OSG场景工作机制 作为一个成熟的三维渲染引擎,需要提供快速获取场景数据、节点等信息,具备自定义数据或动画更新接口,能接收应用程序或窗口等各类消息。OSG三维渲染引擎能较好地完成上述工作,OSG是采用什么方式或工作…...

Tektronix泰克TDP3500差分探头3.5GHz

附加功能&#xff1a; 带宽&#xff1a;3.5 GHz 差分输入电容&#xff1a;≤0.3 pF 差分输入电阻&#xff1a;100 kΩ DC pk 交流输入电压&#xff1a;15 V >60 dB 在 1 MHz 和 >25 dB 在 1 GHz CMRR 出色的共模抑制——减少较高共模环境中的测量误差 低电容和电阻负载…...

轻松实现内网穿透:实现远程访问你的私人网络

导语&#xff1a;内网穿透是什么&#xff1f;为什么我们需要它&#xff1f;今天我们将介绍这个令人惊叹的技术&#xff0c;让你实现远程访问你的私人网络。 使用内网穿透&#xff0c;轻松实现外网访问本地部署的网站 第一部分&#xff1a;什么是内网穿透&#xff1f; 通俗解释…...

MySQL长字符截断

MySQL超长字符截断又名"SQL-Column-Truncation"&#xff0c;是安全研究者Stefan Esser在2008 年8月提出的。 在MySQL中的一个设置里有一个sql_mode选项&#xff0c;当sql_mode设置为default时&#xff0c;即没有开启STRICT_ALL_TABLES选项时&#xff08;MySQLsql_mo…...

python计算量比指标

百度百科是这么写的&#xff1a;量比定义&#xff1a;股市开市后平均每分钟的成交量与过去5个交易日平均每分钟成交量之比。计算公式&#xff1a;量比&#xff08;现成交总手数 / 现累计开市时间(分) &#xff09;/ 过去5日平均每分钟成交量。这里公式没有问题&#xff0c;但是…...

下拉框推荐-Suggest-SUG

什么是下拉框推荐 在我们使用各种app&#xff08;飞猪&#xff09;想要搜索我们想要的东西&#xff0c;假设我想要上海迪士尼的门票&#xff0c;那么精确的query是“上海迪士尼门票”&#xff0c;要打7个字&#xff0c;如果在你输入“上海”的时候app就推荐了query“上海迪士尼…...

Nmap的几种扫描方式以及相应的命令

Nmap是一款常用的网络扫描工具&#xff0c;它可以扫描目标网络上的主机和服务&#xff0c;帮助安全研究员了解目标网络的拓扑结构和安全情况。以下是Nmap的几种扫描方式以及相应的命令&#xff1a; 1.Ping扫描 Ping扫描可以用来探测网络上响应的主机&#xff0c;可以使用“-sn…...

Qt::QOpenGLWidget 渲染天空壳

在qt窗口中嵌入opengl渲染天空壳和各种立方体一 学前知识天空壳的渲染学前小知识1 立方体贴图 天空壳的渲染就是利用立方体贴图来实现渲染流程2 基础光照 光照模型3 opengl帧缓冲 如何自定义帧缓冲实现后期特效4 glsl常见的shader内置函数 glsl编程常用的内置函数二 shader代码…...

谷歌搜索技巧大全 | 谷歌高级搜索语法指令

谷歌搜索技巧是利用各种高级搜索语法或者搜索指令&#xff0c;让我们能够使用Google进行精确化的搜索&#xff0c;外贸找客户和学术文件查找都可以应用到这些搜索技巧。(大部分命令也适用百度搜索)。Google通过互联网收集数据&#xff0c;抓取有意义的信息&#xff0c;将其存储…...

JAVA开发(JAVA垃圾回收的几种常见算法)

JAVA GC 是JAVA虚拟机中的一个系统或者说是一个服务&#xff0c;专门是用于内存回收&#xff0c;交还给虚拟机的功能。 JAVA语言相对其他语言除了跨平台性&#xff0c;还有一个最重要的功能是JAVA语言封装了对内存的自动回收。俗称垃圾回收器。所以有时候我们不得不承认&#…...

你还不会用CAD一键布置停车位?赶紧学起来!

在设计CAD建筑图的过程中&#xff0c;你还在一个一个地画停车位吗&#xff1f;那未免也太低效了吧&#xff01;今天&#xff0c;小编用浩辰CAD建筑软件来教大家一键布置停车位&#xff0c;赶紧学起来吧&#xff01; 浩辰CAD建筑软件是行业应用最广泛的创新型建筑设计专业软件&…...

【MySQL之MySQL底层分析篇】系统学习MySQL,从应用SQL语法到底层知识讲解,这将是你见过最完成的知识体系

文章目录MySQL体系结构MySQL存储结构&#xff08;以InnoDB为例&#xff09;MySQL执行流程&#xff08;以InnoDB为例&#xff09;1. 数据写入原理2. 数据查询原理MySQL存储引擎1. 为什么需要不同的存储引擎2. 如何为数据指定不同的存储引擎&#xff0c;数据粒度又是多少3. MySQL…...

单核CPU是否有线程可见性问题?

本文仅是本人对问题的思考记录&#xff0c;并没有实操验证&#xff0c;有误请大家评论指出。 今天见到了一个经典的问题&#xff0c;单核CPU是否有线程可见性问题&#xff0c;学完操作系统应该可以直接回答&#xff0c;不会有线程安全问题。但如果结合JVM虚拟机来进行分析&…...

MyBatis 架构介绍

MyBatis 架构介绍MyBatis 架构图MyBatis 所解决的 JDBC 中存在的问题引用MyBatis 架构图 mybatis 配置:mybatis-config.xml&#xff0c;此文件作为 mybatis 的全局配置文件&#xff0c;配置了 mybatis 的运行环境等信息。另一个 mapper.xml 文件即 sql 映射文件&#xff0c;文件…...

加密算法---RSA 非对称加密原理及使用

加密算法---RSA 非对称加密原理及使用一 非对称加密原理介绍二 加密解密测试2.1 加密解密工具类2.2 测试一 非对称加密原理介绍 非对称加密算法中&#xff0c;有两个密钥&#xff1a;公钥和私钥。它们是一对&#xff0c;如果用公钥进行加密&#xff0c;只有用对应的私钥才能解…...

MySQL-查询语句

数据库管理系统的一个最重要的功能就是数据查询&#xff0c;数据查询不应只是简单查询数据库中存储的数据&#xff0c;还应该根据需要对数据进行筛选&#xff0c;以及确定数据以什么样的格式显示。MySQL提供了功能强大、灵活的语句来实现这些操作。下面是通过help帮助查看到的s…...

【算法】【数组与矩阵模块】求数组中需要排序的最短子数组长度

目录前言问题介绍解决方案代码编写java语言版本c语言版本c语言版本思考感悟写在最后前言 当前所有算法都使用测试用例运行过&#xff0c;但是不保证100%的测试用例&#xff0c;如果存在问题务必联系批评指正~ 在此感谢左大神让我对算法有了新的感悟认识&#xff01; 问题介绍 …...

centos安装Anaconda3

目录一、参考二、Anaconda简介1、用途2、关于anaconda三、下载安装1、下载2、安装anaconda3、配置环境遍历4、测试配置结果5、设置显示前缀一、参考 在centos上安装Anaconda 最新Anaconda3的安装配置及使用教程&#xff08;附图文&#xff09; 二、Anaconda简介 一句话&…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

Java并发编程实战 Day 11:并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...