Question

我从版本4.7升级到Font Awesome 5（FA 5）。原因是分层图标。在FA 4.7中，使用了protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { // set formatting for the category cell TableCell cell = e.Row.Cells[2]; // set formatting for value cells for (int i = 2; i < e.Row.Cells.Count; i++) { cell = e.Row.Cells[i]; int c_val = int.Parse(e.Row.Cells[i].Text); if (c_val == 0) { //cell.BackColor = System.Drawing.Color.Red;text-align: center; cell.ForeColor = System.Drawing.Color.Red; cell.Attributes.Add("style", "text-align: center;"); cell.Text = ""; //cell.Attributes.Add("Class", "fa fa-remove"); } else { cell.ForeColor = System.Drawing.Color.Green; cell.Attributes.Add("style", "text-align: center;"); cell.Text = ""; //cell.Attributes.Add("Class", "fa fa-check"); } } } else if (e.Row.RowType == DataControlRowType.Header) { for (int i = 2; i < e.Row.Cells.Count; i++) { string Header_NewText = e.Row.Cells[i].Text; e.Row.Cells[i].Text = Header_NewText.Replace(",", " "); } } }类。在FA 5中，fa层非常强大。

问题，据我所知，fa-stack只在纯粹的js版本的Font Awesome中实现。（使用fontawesome-all.js）。如果要使用css版本，则在文件夹结构中的任何位置都看不到fa-layers类（在当前版本的5.0.8中）。是否可以使用FA-5的css版本的fa层？

通过css版本我的意思是：

fa-layers

Bt Js版本，我的意思是：

<head>
  <!--core first + styles last-->
  <link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>

由于fontawesome-all.js将所有i标签替换为svg，因此使用此版本很难进行css操作。所以，如果css版本具有Js版本的所有功能，我想向我们发送FA 5的css版本。

Answer 1

不，带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的图层那么强大，只有SVG和JS才能使用。

Answer 2

我也更喜欢使用Web字体版本，主要是出于性能方面的考虑。我还想在fa-layers类中使用更高级的分层图标。

我在CSS中重新创建了一些fa-layers功能，并放置了样式表up on GitHub。它不是完美或完整的。我仍在努力，但它可能会帮助您获得某些缺少的功能，而无需切换到Web字体和CSS。

Font Awesome 5（带CSS）fa-layers

2 个答案: