当前位置: 首页 > 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简介 一句话&…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...