我从版本4.7升级到Font Awesome 5(FA 5).原因是分层图标.
在FA 4.7中,使用了fa-stack类.在FA 5中,fa层非常强大.
在FA 4.7中,使用了fa-stack类.在FA 5中,fa层非常强大.
问题,据我所知,fa-layers只在Font awesome的纯js版本中实现. (使用fontawesome-all.js).如果要使用css版本,则不会在文件夹结构中的任何位置看到fa-layers类(在当前版本的5.0.8中).是否可以使用带有FA 5的css版本的fa层？
通过css版本我的意思是：
<head> <!--core first + styles last--> <link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet"> </head>
Bt Js版本,我的意思是：
<head> <!--load everything--> <script defer src="/static/fontawesome/fontawesome-all.js"></script> </head>
由于fontawesome-all.js将所有i标签替换为svg,因此使用此版本很难进行css操作.所以,如果css版本具有Js版本的所有功能,我想向我们发送FA 5的css版本.
解决方法
不,带CSS的Webfonts没有SVG与JS的所有功能.
How to Use SVG with JS页面显示了使用JS的SVG新增或独有的一些功能.
Layers,具体来说,是JS的新手：
Layers are the new way to place icons and text visually on top of each
other,replacing our classic icons stacks.
你仍然可以使用带有CSS的Webfonts中的堆栈来做一些有趣的事情：codepen example
<span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fal fa-circle fa-2x fa-stack-1x fa-inverse"></i> <i class="far fa-triangle fa-stack-1x fa-inverse"></i> </span>
但是堆栈肯定不如具有Power Transforms的Layers强大,后者仅在带有JS的SVG中可用.
