vue-cli项目中使用Font Awesome 5 谁践踏了优雅 2022-04-18 04:42 98阅读 0赞 Font Awesome 是一款很好用的字体图标,可以使用的图标很多,省了到处找图标的困扰;因此深受广大开发者喜爱,现在Font Awesome已经更新到5.X,使用方法上也和4以前的版本有所不同,并且还增加了收费版;其实免费版已经足够大家使用啦;下面我就具体介绍一下Font Awesome在vue脚手架项目中的使用方法; 官网:[https://fontawesome.com/][https_fontawesome.com] ### 安装 Font Awesome ### npm i --save @fortawesome/fontawesome npm i --save @fortawesome/vue-fontawesome ### 安装 Font Awesome 样式依赖 ### npm i --save @fortawesome/fontawesome-free-solid npm i --save @fortawesome/fontawesome-free-regular npm i --save @fortawesome/fontawesome-free-brands 注:solid、regular和brands为Font Awesome免费版支持三种样式;后面使用图标时,也是在免费库内选择; ### 配置main.js文件 ### 在main.js文件内加入一下代码 import fontawesome from '@fortawesome/fontawesome' import FontAwesomeIcon from '@fortawesome/vue-fontawesome' import solid from '@fortawesome/fontawesome-free-solid' import regular from '@fortawesome/fontawesome-free-regular' import brands from '@fortawesome/fontawesome-free-brands' fontawesome.library.add(solid) fontawesome.library.add(regular) fontawesome.library.add(brands) Vue.component('font-awesome-icon', FontAwesomeIcon) 注意这里有一个小问题:修改完以上代码,我将项目运行起来后,发现控制台出现了黄色警告,警告内容如下: "export 'default' (imported as 'FontAwesomeIcon') was not found in '@fortawesome/vue-fontawesome' 大概意思就是找不到@fortawesome/vue-fontawesome这个模块,但是我检查了一下package.json文件,发现@fortawesome/vue-fontawesome模块确实已经安装过了,没办法,我就先把引入这个模块的代码注释了,后来发现程序能正常运行,黄色警告也消失了,如果哪位大神有好的解决办法可以留言,万分感谢; 以上安装步骤就完成了,下面就是使用了; 使用方法很简单,就是通过Font Awesome官网上的搜索框,找到自己需要的图标,将收费的图标过滤出去, ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][] 在右边选项栏可以切换样式,选择好样式后,点击上面的i标签,就将代码复制下来了,然后粘贴到自己的代码中需要的位置就搞定了; ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1][] [https_fontawesome.com]: https://fontawesome.com/ [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20220418/b26de39756b5412093fe39321fb73808.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1]: /images/20220418/8b4bf868114d426799b177293c327f41.png
还没有评论,来说两句吧...