12

字体真棒的一个示例用例是这样的（取自他们的示例）：

<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 元素的一部分。

4

5 回答 5

12

约翰的回答是不正确的。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 的人仍然能够阅读您的列表，没有图标！

希望这可以帮助。

于 2012-09-26T14:47:52.603 回答
12

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

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

我遇到了同样的问题，这就是我解决它的方法：在 . 中添加padding-left:一个，<ul>然后在.margin-right:margin-left:li:before

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

演示

一些注意事项：

  1. 此解决方案只需要 CSS，不需要任何额外的标记

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

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

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

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

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

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

于 2013-02-11T05:19:34.860 回答
7

时尚迟到...icon-ok从li's 中删除类并将列表设置为使用图标作为项目符号。从 Font Awesome 详细信息页面中获取图标的 unicode 字符。在这种情况下icon-ok已迁移到icon-check版本 4。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>

使用 Font Awesome 图标作为项目符号，带有单个列表项元素

如何检查图标的代码

感谢@armfoot 提供检查员信息。我已经添加了这个截图来解释如何做，点击::beforeDOM 树中的元素。

于 2014-02-03T20:46:27.067 回答
2

对于多列列表，我使用这个：

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

于 2015-01-27T18:24:05.003 回答
0

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

包括到 Font Awesome 的链接：

<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

于 2019-09-14T13:28:58.423 回答