首页 文章

带有font-awesome图标的自定义li列表样式

提问于
浏览 次
126

我想知道是否可以利用font-awesome（或任何其他标志性字体）类来创建自定义 <li> list-style-type？

我目前正在使用jQuery来做到这一点，即：

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

但是，当 <li> 文本在页面上换行时，这样做不正确，因为它认为图标是文本的一部分，而不是实际的子弹指示器 .

有小费吗？

css html-lists font-awesome

5 回答

  • 275

    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>

    根据自己的喜好调整填充/字体大小/等，这是通常的小提琴：http://jsfiddle.net/joplomacedo/a8GxZ/

    =====

    这适用于任何类型的标志性字体 . 然而，FontAwesome提供了自己的方法来处理这个“问题” . 有关详细信息，请查看下面的Darrrrrren的答案 .

    回复于
  • 48

    根据Font Awesome Documentation：

    <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

    我想提供一个特定于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>
    回复于
  • 43

    我想补充一下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 ... */
}

    希望这是明确的，对我而言比其他人有一些 Value .

    回复于
  • 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;
}
    回复于

相关问题