Question

我想知道,我们是否可以使用<条码>(波茨克)的标语,用于点击(使用CSS)。我知道我们可以使用<条码>FontAwesome来做到这一点,但我只想确认,如果能够使用<条码>做到这一点。诱杀装置。

我确实知道,我们可以使用以下方法:

<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>

我想从安全局做,就像这一样(一个使用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>

我想知道如何使用诱杀装置。如果不可能,我可以采用上述两种方法。如果是,那么我怎么办?

Answer 1

Yes. Include the icon stylesheet in the head tag or @import in css file follow intruction from the site. Then in :before, you declare font-family: bootstrap-icons !important; and content with whatever icon you want, ie the hearth icon will have the code as F59E and so on.

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/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>

<div>+1</div>

Answer 2

My answer might get you some more flexibility. You can use custom counters for any style type.

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>

您可以添加任何类型的符号。

Answer 3

Bootsdorf Icons网页上载有这些网站提供的所有缩影。设置<代码>content,其名称位于icon之下,你可以发现它起作用!

ul,li {
  padding: 0;
  list-style: none;
}

li::before {
  content: "three-dots-vertical";
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  margin-right: 5px;
}

<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

友情链接