Question

字体真棒的示例用例是这样的（取自their examples）：

<ul class="icons">
    <li><i class="icon-ok"></i> Lists</li>
    <li><i class="icon-ok"></i> Buttons</li>
    <li><i class="icon-ok"></i> Button groups</li>
    <li><i class="icon-ok"></i> Navigation</li>
    <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

只要列表项为1行，此列表就可以用于我的目的。但是如果列表项是多行，那么第二行并且进一步不能正确缩进（默认情况下）。

如果这些图标可以用作标准的css项目符号会很好，因为这样多行项目会自动缩进。

是否有一种简单而优雅的方式来实现这一目标？如果我能像这样使用标记，那将是非常棒的：

<ul class="icon-bullets">
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

即。重用特定的图标类，但使它们成为li元素的一部分。

Answer 1

Johan的回答不正确。 Font Awesome使用网页字体，而不是大背景图片！

应该注意的是，您可以简单地将类放到li标签上，如下所示：

<ul>
    <li class="icon-ok">Lists</li>
    <li class="icon-ok">Buttons</li>
    <li class="icon-ok">Button groups</li>
    <li class="icon-ok">Navigation</li>
    <li class="icon-ok">Prepended form inputs</li>
</ul>

然而，有一点需要注意，即使使用条件ie7样式表，它也不会在ie7中起作用。列表项消失，只留下图标！如果你不支持ie7，那么简单地省略条件样式表，那么至少那些不幸使用ie7的人仍然可以阅读你的列表，没有图标！

希望这有帮助。

Answer 2

我知道我迟到了，但我不认为任何解决方案，即使是选定的解决方案，也完全解决了问题。这是关于尽可能准确地解决具体问题。

根据OP的核心问题：“如果这些图标可以用作标准的css项目符号会很好，因为这样多行项目会自动缩进。”

我遇到了同样的问题，以下是我解决问题的方法：向padding-left:添加<ul>，然后在其中添加“肯定”margin-right:和否定margin-left: li:before。

您在演示中看到的基本上是：margin:0 5px 0 -15px;。

的 DEMO 的

一些注意事项：

此解决方案只需要CSS，无需任何额外标记

这适用于多行内容，因此如果您的内容换行到第二行或更多行，则它不会显示在图标/列表项下。

没有必要像Font Awesome和Bootstrap那样使用额外的标记，这是完全错误的，因为我们都知道我们必须将内容与样式和功能分开。为了使用图标添加额外的标记显然是代码膨胀。我的解决方案使用简单的标记，如下所示：

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

由于我无法加载字体，因此我使用»字符作为content:'»'值来说明图标/列表项。但是，我确实留下了所有@font-face声明，因此任何人都可以使用它并将路径替换为其字体文件。像这样：

url("path/to/font-name.woff") format("woff"),

您可能需要使用li:before中的边距值来正确定位图标/列表项目，无论如何在使用上述任何解决方案或FontAwesome时都必须这样做和Bootstrap的解决方案。

Answer 3

姗姗来迟......从icon-ok中删除课程li，并将列表设置为使用图标作为项目符号。从Font Awesome详细信息页面中获取图标的unicode字符。在这种情况下，icon-ok已在版本4中迁移到icon-check。unicode与f00c相同。

ul.ok {
    list-style-type: none;
    margin-left: 0;
    padding-left: 1em;
}

ul.ok li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -15px;
    color: #f00;
}


<ul class="ok">
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
</ul>

Using Font Awesome icon for bullet points, with a single list item element

How to inspect icons for code

感谢@armfoot提供检查员信息。我已添加此屏幕截图，说明如何执行此操作，单击DOM树中的::before元素。

Answer 4

对于多列列表，我使用：

ul.twocolumn, ol.twocolumn {
  -moz-column-count: 2;
  -moz-column-gap: 5px;
  -ms-column-count: 2;
  -ms-column-gap: 5px;
  -webkit-column-count: 2;
  -webkit-column-gap: 5px;
  column-count: 2;
  column-gap: 5px;
  list-style-position: inside; /* bugfix for hidden bullets/numbers */
}

通常在声明时：

<ul class="fa-ul twocolumn">
  <li><i class="fa-li fa fa-whatever-icon"></i> foo</li>
  <li><i class="fa-li fa fa-whatever-icon"></i> bar</li>
</ul>

然而，它无法正常工作......请注意，由于某种原因，Font Awesome图标不会显示大于1的列数。使用Chrome进行测试时，您将看到切换时的差异-webkit -column-count：2

Answer 5

在Font Awesome 5中，可以使用纯CSS来完成，如上述某些答案中所做的一些修改。

包括指向“真棒字体”的链接：

<link rel="stylesheet" href="../css/fontawesome-all.min.css">

为了简单起见，我将按以下方式使用html，而没有为ul和li使用单独的类。

<ul>
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
    <li>Navigation</li>
    <li>Prepended form inputs</li>
</ul>

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;
}

没有正确的字体粗细，它将仅显示一个空白方块。

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

使用Font Awesome图标作为项目符号

5 个答案: