自定义 li 列表样式和字体-可怕的图标

小开

最佳答案

模块3的列表和计数器引入了 ::marker伪元素。据我所知，它允许这样的事情。

你所能做的就是在父 ul中添加一些填充，然后把图标拉到那个填充中:

ul {
list-style: none;
padding: 0;
}
li {
padding-left: 1.3em;
}
li:before {
content: "\f00c"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>

根据您的喜好调整填充/font-size/etc，就是这样。

您可以也应该将间隔单元放在 css 变量中，而不是在整个代码中重复它。

=====

这适用于任何类型的图标字体。然而 FontAwesome 提供了他们自己的方式来处理这个“问题”。看看下面 Darrrrren 的回答，了解更多细节。

小开

我想提供一个特定于 FontAwesome 的替代的、更简单的解决方案。如果您使用的是不同的图标字体，JOPLOmacedo 的回答仍然非常适合使用。

FontAwesome 现在使用 CSS 类在内部处理列表样式。

下面是官方的例子:

<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

小开

我想补充一下 JOPLOMacedo 的回答。他的解决方案是我最喜欢的，但我总是有问题缩进时，李有一个以上的行。为了找到正确的压痕和边距等等，费了很大的劲。但这可能只关系到我。

对于我来说，:before的绝对定位伪元素效果最好。我在 ul 上设置了 padding-left，在 :before元素上左边的负位置，与 ul 的 padding-left相同。为了得到内容与 :before元素之间的距离，我只需在 li 上设置 padding-left。当然 Li 必须有位置相对。比如说

ul {
margin: 0 0 1em 0;
padding: 0 0 0 1em;
/* make space for li's :before */
list-style: none;
}


li {
position: relative;
padding-left: 0.4em;
/* text distance to icon */
}


li:before {
font-family: 'my-icon-font';
content: 'character-code-here';
position: absolute;
left: -1em;
/* same as ul padding-left */
top: 0.65em;
/* depends on character, maybe use padding-top instead */
/*  .... more styling, maybe set width etc ... */
}

希望这一点很清楚，而且对别人有一些价值，而不是我。

小开

根据字体超赞文档:

<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Barbabella</li>
<li><i class="fa-li fa fa-check"></i>Barbaletta</li>
<li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

或者，使用 Jade:

ul.fa-ul
li
i.fa-li.fa.fa-check
| Barbabella
li
i.fa-li.fa.fa-check
| Barbaletta
li
i.fa-li.fa.fa-check
| Barbalala

小开

我是这样做的:

li {
list-style: none;
background-image: url("./assets/img/control.svg");
background-repeat: no-repeat;
background-position: left center;
}

如果你想改变颜色，你也可以试试这个:

li::before {
content: "";
display: inline-block;
height: 10px;
width: 10px;
margin-right: 7px;


background-color: orange;
-webkit-mask-image: url("./assets/img/control.svg");
-webkit-mask-size: cover;
}

小开

我做了两件事，灵感来自@Oscar Jovanny 的评论，用了一些黑客技巧。

第一步:

从给你下载图标文件 svg，因为我只需要这个图标从字体真棒

第二步:

<style>
ul {
list-style-type: none;
margin-left: 10px;
}


ul li {
margin-bottom: 12px;
margin-left: -10px;
display: flex;
align-items: center;
}


ul li::before {
color: transparent;
font-size: 1px;
content: " ";
margin-left: -1.3em;
margin-right: 15px;
padding: 10px;
background-color: orange;
-webkit-mask-image: url("./assets/img/check-circle-solid.svg");
-webkit-mask-size: cover;
}
</style>

结果

enter image description here

小开

既然 ::marker元素在常青树浏览器中可用，下面就是如何使用它，包括使用 :hover来更改标记。正如你所看到的，现在你可以使用任何你想要的 Unicode字符作为列表项标记，甚至可以使用自定义计数器。

@charset "UTF-8";
@counter-style fancy {
system: fixed;
symbols: 🙂 😀 😁;
suffix: " ";
}


p {
margin-left: 8em;
}


p.note {
display: list-item;
counter-increment: note-counter;
}


p.note::marker {
content: "Note " counter(note-counter) ":";
}


ol {
margin-left: 8em;
padding-left: 0;
}


ol li {
list-style-type: lower-roman;
}


ol li::marker {
color: blue;
font-weight: bold;
}


ul {
margin-left: 8em;
padding-left: 0;
}


ul.happy li::marker {
content: "🙂";
}


ul.happy li:hover {
color: blue;
}


ul.happy li:hover::marker {
content: "😐";
}


ul.fancy {
list-style: fancy;
}

<p>This is the first paragraph in this document.</p>
<p class="note">This is a very short document.</p>
<ol>
<li>This is the first item.
<li>This is the second item.
<li>This is the third item.
</ol>
<p>This is the end.</p>


<ul class="happy">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>


<ul class="fancy">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

小开

这是我的版本: FontAwesome 5ul

ul {
list-style-position: inside;
padding-left: 0;
}
ul li {
list-style: none;
position: relative;
padding-left: 20px;
}
ul li::before {
position: absolute;
top: calc(50% - 4px); /* half font-size */
left: 0px;
font-family: "Font Awesome 5 Free";
content: "\f111";
font-size: 8px;
font-weight: 900;
}

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ul>

小开

见参考文献: https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>