如果使用 VUE 展示 Font Awesome 全部图标。

Question

我想要实现这样一个功能： 在一个页面上将 FontAwesome 的全部图标展示出来。用户在设置图标时可以直接点击选择图标，然后就在弹窗层页面上将所有的 ICON 展示出来，这样用户可以直接点击图标即可选择。

现在已经实现了 Element-UI 的效果了（参考[Form Generator](https://github.com/JakHuang/f...），效果如下：

ps：gif 图片一致处于上传中

现在想求 FontAwesome 的实现方式。

Answer 1

好吧，这个问题我已经解决了。

我找到了一个网站：font-awesome 4.7.0，这个网站是将官网的图标全部翻译了一遍，截图如下：

我之后写了个爬虫将所有的 icon 的名称爬取下来保存到一个 json 文件中，格式如下：

{[{"name": "fa fa-mail", "nickname": "邮件"}], [] ...}

PS: 虽然不想承认最后还是发现自己沙皮了，打开控制台检查元素你会看到有个隐藏的下载链接... ，爬完之后才注意到。

最终效果如下：

选择 ElementUI ICON:

选择 FontAwesome ICON:

---

问题完美解决。

至于为什么不使用 iconfont，是因为不知道怎么处理 ......

我本来思路如下：在弹窗中调用 iconfont 的查询接口，最后将选择的 icon 下载下载进行展示（虽然我知道不能这么解决）。

另外，我发现。iconfont 能够建立项目，将 icon 转编码，只要引入 css 即可（也可以使用在线的）。但是这种方式有个问题：

图标必须已经加入到项目中才行，在很大一定程度上受限制了 ......

具体思路如下：

在 iconfont 中建立项目，将想要用的 icon 加入到该项目中。然后再项目中引用在线 css（因为是国内，网速还是没问题的）。然后再弹窗搜索框中使用在线
搜索：调用 阿里ICON 项目图标中的查询接口，然后过滤。最终将选择的图标名称摘下载即可，比如项目中有如下图标：

这样你直接获取图标名 icon-shopping 即可，这个问题也很明显。

不知道各位看官有什么更好的想法 ~