如何将图标放在 <ul> 标签中？

Question

我想将 <i class="fa fa-exclamation-circle" style="color:red"></i> 作为我的列表样式图像。但是我想使用感叹号图标而不是图像。如何将感叹号图标置于列表样式中？我应该在哪一部分更改并放置图标。如果可以的话。我正在使用 bootstrap，但我只想更改这部分。

如果我有这些CSS，我该如何实现？

ul.listing-style2 li {
  position: relative;
  padding-left: 30px;
  line-height: 2em;
  font-size: 16px;
  margin-bottom: 15px;
}
ul.listing-style2 li:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  content: "\f05d";
  font-family: 'FontAwesome';
  color: #106eea;
  font-size: 22px;
}
ul.listing-style2 li:last-child {
  margin-bottom: 0 !important;
}
ul.listing-style2.modify li {
  padding-left: 25px;
  margin-bottom: 8px;
}
ul.listing-style2.modify li:before {
  content: "\f05d";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<ul class="listing-style2 modify ml-20 mb-28">
  <li>Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut <i><b>labore et dolore magna.</b></i></li>
  <li>Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</li>
</ul>

Answer 1

您可以将内容更改为 content: "\f06a"; 并将 color: red 更改为相同的代码。您可以使用 list-style: none 到 <ul> 这样您就不会得到多余的项目符号。

ul {
  list-style: none;
}

ul.listing-style2 li {
  position: relative;
  padding-left: 30px;
  line-height: 2em;
  font-size: 16px;
  margin-bottom: 15px;
}
ul.listing-style2 li:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  content: "\f06a";
  font-family: 'FontAwesome';
  color: red;
  font-size: 22px;
}
ul.listing-style2 li:last-child {
  margin-bottom: 0 !important;
}
ul.listing-style2.modify li {
  padding-left: 25px;
  margin-bottom: 8px;
}
ul.listing-style2.modify li:before {
  content: "\f06a";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="listing-style2 modify ml-20 mb-28">
  <li>Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut <i><b>labore et dolore magna.</b></i></li>
  <li>Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</li>
</ul>

如果您只想将 ! 标记为项目符号。将内容更改为 content: '!'.

ul {
  list-style: none;
}

ul.listing-style2 li {
  position: relative;
  padding-left: 30px;
  line-height: 2em;
  font-size: 16px;
  margin-bottom: 15px;
}
ul.listing-style2 li:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  content: "!";
  font-family: 'FontAwesome';
  color: red;
  font-size: 22px;
}
ul.listing-style2 li:last-child {
  margin-bottom: 0 !important;
}
ul.listing-style2.modify li {
  padding-left: 25px;
  margin-bottom: 8px;
}
ul.listing-style2.modify li:before {
  content: "!";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="listing-style2 modify ml-20 mb-28">
  <li>Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut <i><b>labore et dolore magna.</b></i></li>
  <li>Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</li>
</ul>

如何将图标放在 <ul> 标签中？

How to put icon in <ul> tag?

html

css

icons

font-awesome