我想知道是否可以使用font-awesome(或任何其他标志性字体)类来创建自定义<li>
列表样式类型?
我目前正在使用jQuery来执行此操作,即:
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
但是,当<li>
文本在页面中换行时,这样做不正确,因为它认为图标是文本的一部分,而不是实际的子弹指示器。
任何提示?
答案 0 :(得分:295)
CSS Lists and Counters Module Level 3引入了::marker
伪元素。从我的理解,它将允许这样的事情。 Unfortunately, no browser seems to support it
您可以做的是向父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>
根据自己的喜好调整padding / font-size / etc,就是这样。这是通常的小提琴:http://jsfiddle.net/joplomacedo/a8GxZ/
=====
适用于任何类型的标志性字体。然而,FontAwesome提供了自己的方法来处理这个“问题”。请查看下面的Darrrrrren的答案以获取更多详细信息。
答案 1 :(得分:54)
<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
答案 2 :(得分:46)
我想提供一个特定于FontAwesome的备用,更简单的解决方案。如果您使用的是其他标志性字体,JOPLOmacedo的答案仍可以完美使用。
FontAwesome now handles list styles internally with CSS classes
这是官方的例子:
<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>
答案 3 :(得分:2)
我想添加到JOPLOmacedo的答案。他的解决方案是我最喜欢的,但是当li有多行时,我总是遇到缩进问题。找到带边距等的正确缩进是很繁琐的。但这可能只涉及我。
对我来说绝对定位:在伪元素之前效果最好。我在ul上设置了padding-left,在:before元素上设置了负位置,与ul的padding-left相同。要获取内容距离:before元素右边,我只需在li上设置padding-left。当然,李必须有相对的位置。例如
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 ... */
}
希望这一点很明确,对我以外的其他人有一定的价值。
答案 4 :(得分:0)
我是这样做的:
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;
}
答案 5 :(得分:0)
如果要上传图像作为ul {list-style-image: url("")}
图标,则可以使用li
。
答案 6 :(得分:0)
我做了两件事,受到@OscarJovanny评论的启发,并做了一些修改。
第1步:
第2步:
<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>
结果
答案 7 :(得分:0)
现在evergreen browsers中提供了::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>