基于vue开发的插件-Font Awesome图标库部分心得

Font Awesome

网址：http://fontawesome.dashgame.com/
Font Awesome是一个图标库，此网站提供了很多常用的UI图标

关于vue下载安装

官方给出了几种下载方式：

1. 将以下代码粘贴到网页HTML代码的 head 部分：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

1. LESS Ruby Gem方式：

（1）将下面这行代码加入到应用的Gemfile中：
gem ‘font-awesome-less’

（2）然后执行：
$ bundle

（3）或者自行安装：
$ gem install font-awesome-less

等等，这里就不在叙述了，正常的也可以用npm install font-awesome --save 安装成功后package显示内容。
然后引入

<link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/fontawesome.min.css" rel="stylesheet">

基本运用

以 i 标签来作为容器显示，加入fontawesome约定的样式即可。

在后面加入此项css可以调整图标大小

其他需求可以寻求官网，这里不再赘述。

主要问题

在用Font Awesome图标库的时候很多同学遇到了这样的问题，使用webpack打包后图标全都不见了，怎么解决呢？
在bulid文件夹下的webpack.base.conf.js文件中找到下图处，然后修改limit的值，调大些即可解决

Font Awesome图标库,就分享到这了，谢谢大家

• 点赞
• 收藏
• 分享
• 文章举报