html - 怎么把图标放进去标签?
问题描述
我想把它<i class="fa fa-exclamation-circle" style="color:red"></i>
作为我的列表样式图像。但我想使用感叹号图标而不是图像。如何将感叹号图标作为列表样式?我应该在哪个部分更改并放置图标。如果有可能做到这一点。我正在使用引导程序,但我只想更改这部分。
如果我将这些作为 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>
解决方案
您可以将内容更改为content: "\f06a";
相同color: red
的代码。您可以使用list-style: none
to ,<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>
推荐阅读
- php - lib/classes/Swift/Transport/EsmtpTransport.php 中的 Swift Mailer 错误日志
- java - 如何在java中只返回一个实例?
- stored-procedures - 是否可以将可变数量的参数传递给redshift中的存储过程?
- android - 包含 TableLayout 和 3 个 Textview 的 ExpandableListView 子项未触发单击侦听器
- spark-streaming - 在 Spark-Streaming 中使用 InputDStream 时导致垃圾收集器开销的原因
- mysql - 指定为定义者的用户不存在 - GRANT 无法修复
- c++ - 用 C++ 构建一个完全独立的wireshark解析器模块
- typescript - 打字稿:无法从模块导入类
- node.js - 如何在 Google Sheets Node.js 脚本中循环值?
- excel - 如何根据公式结果更改颜色?