css 我们可以为项目符号使用引导图标吗？

hjzp0vay 于 2023-01-06 发布在其他

关注(0)|答案(2)|浏览(113)

我想知道我们是否可以使用Bootstrap图标作为项目符号（使用CSS）。我知道我们可以使用FontAwesome来做到这一点，但我只想确认是否可以使用Bootstrap来做到这一点。
虽然我知道我们可以使用以下方法：

<ul>
  <li><i class="bi bi-check"></i> Buy Milk</li>
  <li><i class="bi bi-check"></i> Buy Egg</li>
  <li><i class="bi bi-check"></i> Buy Bread</li>
</ul>

我想从CSS做，就像这样（一个例子使用FontAwesome）：

<style>
  ul li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin:0 5px 0 -15px;
    color: #f00;
  }
</style>
<ul>
  <li>Buy Milk</li>
  <li>Buy Egg</li>
  <li>Buy Bread</li>
</ul>

我想知道如何使用Bootstrap来做。如果不可能，我可以使用上面两种方法中的任何一种。如果可以，我该怎么做？

css

来源：https://stackoverflow.com/questions/74989431/can-we-use-bootstrap-icons-for-bullet-points

2条答案

按热度按时间

o2g1uqev1#

是的。在head标签中包含图标样式表，或者在css文件中包含@import，按照site的说明。然后在:before中，你可以用任何你想要的图标声明font-family: bootstrap-icons !important;和content，即壁炉图标的代码是\F59E等等。

div:before {
    content: "\F59E";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
  margin-right: 5px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet"/>

<div>+1</div>

赞(0）回复(0）举报 2023-01-06

eqqqjvef2#

我的答案可能会给你带来更多的灵活性。你可以为任何样式类型使用自定义计数器。

li {
  list-style-type: thumbs;
}

@counter-style thumbs {
  system: cyclic;
  symbols: 😍 😂 😒;
  suffix: " ";
}

<ul>
  <li><i class="bi bi-check"></i> Buy Milk</li>
  <li><i class="bi bi-check"></i> Buy Egg</li>
  <li><i class="bi bi-check"></i> Buy Bread</li>
</ul>

你可以添加任何你喜欢的符号类型。

赞(0）回复(0）举报 2023-01-06

我来回答

css 我们可以为项目符号使用引导图标吗？

2条答案

相关问题

热门标签

最新问答