I would like to put <i class="fa fa-exclamation-circle" style="color:red"></i>
as my list-style-image. But instead of image I want to use the exclamation icon. How do I put the exclamation mark icon as the in the listing style ? At which part should I change and put the icon. If it is possible to do that. I'm using a bootstrap but I'm trying to change this part only.
How do I achieved it if I have these as 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>
CodePudding user response:
You can just change the content to content: "\f06a";
and the color: red
to the same code. You can use list-style: none
to the <ul>
so that you won't get a redundant bullet.
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>
If you just want to put !
mark as bullet. Change content to 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>