Vue 3 使用FontAwesome


  1. 安装prelease的vue-fontawesome,这与3的Vue,图标依赖性兼容:

    npm i --save @fortawesome/vue-fontawesome@prerelease
    npm i --save @fortawesome/fontawesome-svg-core
    npm i --save @fortawesome/free-solid-svg-icons
    
  2. 在中main.js,选择@fortawesome/free-solid-svg-icons要加载的图标:
    import { library } from "@fortawesome/fontawesome-svg-core";
    import { faPhone } from "@fortawesome/free-solid-svg-icons";

        `  library.add(faPhone);`
    
  3. 全局注册font-awesome-icon组件:
    import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

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

  4. 在src/App.vue中使用这样的组件(请注意,图标名称是phone,不是faPhone):

    <font-awesome-icon :icon="['fas', 'phone']" />
    <font-awesome-icon icon="phone" />
    
  5. 显示图标

    image-20210429093539203


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM