首页 > 其他分享 >fortawesome在vue3中的使用

fortawesome在vue3中的使用

时间:2023-12-25 23:32:03浏览次数:51  
标签:icons fontawesome vue3 library add fortawesome 使用 import

fortawesome的使用,2023-12-25

https://fontawesome.com/search?o=r&m=free&c=coding&s=solid

6.5.1,3.0.5,6.5.1

yarn add @fortawesome/fontawesome-svg-core 
yarn add @fortawesome/vue-fontawesome 
yarn add @fortawesome/free-solid-svg-icons


/* Set up using Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')


<template>
  <div id="app">

    <!-- Add the style and icon you want using the String format -->
    <font-awesome-icon icon="fa-solid fa-user-secret" />

  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>


library.add(fas, far, fab)


标签:icons,fontawesome,vue3,library,add,fortawesome,使用,import
From: https://blog.51cto.com/lenglingx/8973423

相关文章

  • MarkDown使用事项
    MarkDown学习标题几个#号,就是几级标题字体Hello,WorldHello,WorldHello,WorldHello,WorldHello,World引用选择狂神说java,走向123分割线图片超链接点击跳转到ZWX博客列表表格代码......
  • 记录arthas的初次使用
    1.起因:写了个数据传输接口,放到服务器上后,传输时间非常长,因为是个很简单的接口,左看右看排查不出问题,只能上工具了。2.下载arthas百度云:https://pan.baidu.com/s/1Y_ltv-4wK8rmrRSf-WRPoQ提取码:ylrv链接来自:https://www.cnblogs.com/baijuyi334/p/12565639.html#/cnblog/works/a......
  • 如何在 WindowManager.addView 中使用 Jetpack Compose
    如何在WindowManager.addView中使用JetpackCompose一、引出问题Android开发中,很常见的一个场景,通过WindowManager.addView()添加一个View到屏幕上。Android最新的视图框架JetpackCompose,如何应用进来。这个被添加的View如何使用Compose编写视图呢?二、探究问题......
  • [转][C#]Logger 在 IoC 中的使用
    只需要在 App.xaml.cs中添加以下代码:protectedoverridevoidRegisterTypes(IContainerRegistrycontainerRegistry){varfactory=newNLog.Extensions.Logging.NLogLoggerFactory();ILoggerlogger=factory.CreateLogger("NLog");containerRegistr......
  • 在Android应用开发中使用NFC功能
    NFC介绍NFC是指“近场通讯”(NearFieldCommunication),它是一种短距离无线通信技术,允许设备在非接触或极短距离内进行通信。NFC通常用于移动支付、门禁系统、智能标签和其他物联网应用中。Android系统对NFC提供了广泛的支持。通过NFC技术,Android设备可以与其他NFC设备进行通信,读取NF......
  • STM32使用cubemx生成代码的系统时钟频率配置
    STM32使用cubemx生成代码的系统时钟频率配置当使用cubemx软件自动生成hal库代码时,我们在可视化界面配置的系统时钟频率会通过SystemClock_Config()函数进行配置。如下图所示:下面则是cubemx中可视化界面配置时钟频率的页面。使用了外部高速时钟HSE当做时钟源,随后对外部高速时钟......
  • 嘿,我使用了mp的自连接+分页查询之后,再使用条件查询居然失效了。
    原因:我想通过自连接查询将一个表的两条数据放在一起,为此我重写了mp的分页查询IPage<Indi>selectIndiShow(IPage<Indi>page,@Param(Constants.WRAPPER)QueryWrapper<Indi>wrapper);我又在xml中这样写mapper<?xmlversion="1.0"encoding="UTF-8"?><!DOCTY......
  • 达梦数据对比工具的部署与使用
    1、拷贝达梦软件bin目录到Oracle服务器(root用户)压缩Linuxrh6x86版本的达梦数据库bin目录,例如压缩文件为dmbin.tar.gz,将文件拷贝到Oracle服务器指定目录并解压(如:/home/oracle/dmbin),给目录/home/oracle/dmbin授予相关权限和用户组chown-Roracle:oinstall/home/oracle/dmbin2、配......
  • Halcon 机械视觉 使用仿射变换 机械手实现孔位定位
    要推算机械手平面坐标系A与相机平面坐标系B的关系,我们可以首先找到两个平面坐标系之间的平移量和旋转量。平移量:选择一个公共的参考点,比如某个标志物,假设在坐标系A中的坐标为(Ax,Ay),在坐标系B中的坐标为(Bx,By)。那么平移量可以表示为:Δx=Bx-AxΔy=By-Ay这里的(Δx,Δy)......
  • windows使用rclone挂载alist为本地磁盘,设置开机自启
    前言实现在windows下将alist挂载为本地磁盘,并设置开机自启,使得重启后依然生效。教程下载软件Rclone:RclonedownloadsWinFsp:https://winfsp.dev/rel/配置Rclone假设Rclone所在目录是:D:\rclone-v1.64.0-windows-amd64,进入文件目录,在地址栏输入cmd输入rcloneconfig......