vue3x fontawesome字体图标插件使用

本文主要是介绍vue3x fontawesome字体图标插件使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官网

https://fontawesome.com

安装

npm install --save-dev @fortawesome/fontawesome-free@5.15.3

使用

main.js

import { createApp } from 'vue'
import App from './App.vue'

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all'

createApp(App).mount('#app')

App.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

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

<style>

</style>

Example.vue

<template>
    <div>
        <i class="fas fa-user"></i>
        <i class="fab fa-apple"></i>
        <i class="far fa-envelope"></i>
        <i class="far fa-grin"></i>
        <hr>

        <i class="fas fa-align-center"></i>
        <i class="fas fa-align-justify"></i>
        <i class="fas fa-align-left"></i>
        <i class="fas fa-align-right"></i>
        <hr>
        <i class="fas fa-angle-double-down"></i>
        <i class="fas fa-angle-double-left"></i>
        <i class="fas fa-angle-double-right"></i>
        <i class="fas fa-angle-double-up"></i>
    </div>
</template>

<script>
    export default {
        name: "Example"
    }
</script>

<style scoped>
    div svg{
        margin:20px;
    }
</style>

浏览器显示效果

这篇关于vue3x fontawesome字体图标插件使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！