我想要实现这样一个功能: 在一个页面上将 FontAwesome
的全部图标展示出来。用户在设置图标时可以直接点击选择图标,然后就在弹窗层页面上将所有的 ICON
展示出来,这样用户可以直接点击图标即可选择。
现在已经实现了 Element-UI
的效果了(参考[Form Generator](https://github.com/JakHuang/f...),效果如下:
ps:gif 图片一致处于上传中
现在想求 FontAwesome
的实现方式。
好吧,这个问题我已经解决了。
我找到了一个网站: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
即可,这个问题也很明显。
不知道各位看官有什么更好的想法 ~