Css 使用字体可怕图标作为项目符号，并带有单个列表项元素_Css_Font Awesome

Css 使用字体可怕图标作为项目符号，并带有单个列表项元素

css

Css 使用字体可怕图标作为项目符号，并带有单个列表项元素,css,font-awesome,Css,Font Awesome,我们希望能够使用字体Awesome（）图标作为CMS中无序列表的要点 CMS上的文本编辑器仅输出原始HTML，因此无法添加其他元素/类这意味着当标记看起来如下所示时显示图标： <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 项目1 项目2 项目3 我看到的第一个问题是Font Awesome是否需要不同的字体族属性，这将需

我们希望能够使用字体Awesome（）图标作为CMS中无序列表的要点

CMS上的文本编辑器仅输出原始HTML，因此无法添加其他元素/类

这意味着当标记看起来如下所示时显示图标：

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>


项目1
项目2
项目3

我看到的第一个问题是Font Awesome是否需要不同的字体族属性，这将需要一个单独的元素

这是否可能使用纯CSS？或者我必须使用类似jQuery的东西将元素附加到每个列表项的开头吗

我意识到我们可以使用背景图像的回退，但如果可能的话，使用Font Awesome会很棒。

有一个例子说明了如何使用Font Awesome，以及如何在他们的屏幕上列出无序列表


列表
钮扣
按钮组
航行
前置表单输入

如果您在尝试此代码后发现它无法工作，则说明您没有正确包含库。根据他们的网站，您应该包括以下图书馆：

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

在他的网站上也可以看到这个异想天开的故事

他还谈到了如何创建自己的图标字体。

@Tama，您可能需要检查以下答案：

基本上，您可以通过只使用CSS来实现这一点，而不需要像FontAwesome和其他答案所建议的那样使用额外的标记

换句话说，您可以使用与您在第一篇文章中提到的相同的基本标记来完成所需的工作：

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

谢谢。

解决方案：

下面是一个例子，它深入地解释了这项技术。

新的fontawesome（版本4.0.3）使这项工作变得非常容易。我们仅使用以下类：

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>


列出图标（如下所示）
可以使用
取代
列表中的默认项目符号

根据这个（新）url:

我想在上面和其他地方给出的一些答案的基础上，建议使用绝对定位，以及：before伪类。上面的许多示例（以及类似的问题）都在使用自定义HTML标记，包括FontAwesome的处理方法。这与最初的问题背道而驰，也不是绝对必要的

基本上就是这样。您可以在上获取用于CSS内容的ISO值。只需使用最后4个前缀为反斜杠的字母数字。因此

[；]

成为

\f058
我使用标准和内部的解决方案
  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>


贝宝
苹果支付
条纹
签证



在Font Aowesome 5中，可以使用纯CSS，如上面的一些答案中所述，进行一些修改
ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

如果没有正确的字体大小，它将只显示一个空白方块
您不需要额外的标记：li:before
可以有不同于li
本身的字体系列。@cimmanon:虽然您确实是正确的，但font Awesome的文档建议您应该有额外的标记。从技术上讲，它是不需要的，但是，我觉得它可能需要一些挖掘通过字形的字体，以找出哪个键映射到哪个符号。这需要一些时间和耐心，但可以肯定的是，您的解决方案也会起作用。@Cerelarceny-我们的问题是CMS的HTML编辑器（TinyMCE）产生了我在问题中给出的格式。因此，从这个角度来看，我们无法控制HTML列表。除非我们将TinyMCE配置为包含i元素（而不是将其作为空元素删除）。那么你没有访问HTML的权限，你有访问CSS的权限吗？是的，完全访问CSS。这里有一个有用的列表，列出了从这些字体超棒图标到CSS值的转换：你需要包含它来删除默认的项目符号ul{列表样式类型：无；}
当我在同一页上有两个列表时，为什么这个方法不起作用？很好，我唯一建议把事情排得更好的方法是使用边距：0 0.2em 0-1.2em；
只需将这两个值增加/减少相同的量，以获得所需的间距。如果你使用的固定像素值与你的值不正确对应ur字体您会注意到多行列表项上存在差异。我为此添加了ul前缀，否则如果客户使用cms创建订单（编号），它将尝试这样做列表对于新的fa版本，这应该是正确的答案。做得很好，感谢您的解释。我不同意，这个问题要求使用纯CSS中的单个列表来解决。这使用了额外的HTML以及类。虽然fa文档明确指定了这样做的方式，但从技术上讲，这并不是问题的解决方案，如果您希望在不修改HTML输出的情况下执行此操作，则没有任何用处。我知道您的目的-但是，在无法修改HTML的情况下不经常编写纯CSS的人？？？（说真的，请考虑更改您的web框架）将需要他们的谷歌查询内存刷新器来链接到“正确”字体，与“实际”答案并列，然后彼此决定。我不是说“这个问题没有一个正确的答案”但是没有…这种方法不适用于将列表元素换行到多行的情况，因为附加行上的标识不会扩展到包括图标的宽度。可能值得添加，使用FA 4.3（也可能是其他版本）和Bootstrap 3，需要设置ul
和li
项位置：相对，因为ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}