CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了font-awesome-5 – Font Awesome 5(带CSS)fa-layers大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我从版本4.7升级到Font Awesome 5(FA 5).原因是分层图标.
在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的新手:

你仍然可以使用带有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中可用.

大佬总结

以上是大佬教程为你收集整理的font-awesome-5 – Font Awesome 5(带CSS)fa-layers全部内容,希望文章能够帮你解决font-awesome-5 – Font Awesome 5(带CSS)fa-layers所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。