Custom li list-style with font-awesome icon
The CSS Lists and Counters Module Level 3 introduces the ::marker
pseudo-element. From what I've understood it would allow such a thing. Unfortunately, no browser seems to support it.
What you can do is add some padding to the parent ul
and pull the icon into that padding:
ul {
list-style: none;
padding: 0;
}
li {
padding-left: 1.3em;
}
li:before {
content: "\f00c"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
Styling list items, replacing bullet with fontawesome
.custom_list li {
line-height:2em;
padding-left:0px;
padding-top:5px;
padding-bottom:5px;
font-size:14px;
list-style-type:none;
list-style:none;
display: table-row;
}
.custom_list li:before {
font-family: 'FontAwesome';
content: "\f192";
color: black;
margin-right:15px;
display: table-cell;
}
You need to change your list format to table
Change li icon to font awesome icon
you syntax is wrong:
this will work:
.ul_settlement {
margin-left: 20px;
}
.ul_settlement .li_settlement {
padding-top: 15px;
font-family: $footer-mid-text-font-family;
font-size: $footer-mid-text-font-size;
}
.ul_settlement .li_settlement::before {
content: "\f054"; /* FontAwesome Unicode */
font-family: 'Font Awesome 5 Free';
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
font-weight: 900;
}
Otherwise you would need a css-preprocessor like sass or less.
Using Font Awesome icon for bullet points, with a single list item element
Solution:
http://jsfiddle.net/VR2hP/
ul li:before {
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}
Here's a blog post which explains this technique in-depth.
Dynamically creating lists with font-awesome icons instead of bullet points
I think you got the class names wrong:
p Test
| ##
span.fas.fa-file-alt
| !!
span.far.fa-folder-open
| ##
-
const tickets = [
{ status: "file", description: "Hello World"},
{ status: "x", description: "test"}]
each ticket in tickets
li(style="list-style-type:none")
- const status = ticket.status === "file" ? [ "fa", "fa-file"] : [ "fa", "fa-folder-open"]
i(class=status)
|
a(href="#")=ticket.description
produces:
The link
to the Fontawesome css file has to be there. I tried with both versions 4.4 and 4.7 and the results were the same.
Using Font Awesome to custom a li-element - a bit complicated case
This hand pointer you mean?
function theChampInitiateFB(){}
li.theChampSelectedTab {list-style-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M256 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm1408-576q0-51-39-89.5t-89-38.5h-576q0-20 15-48.5t33-55 33-68 15-84.5q0-67-44.5-97.5t-115.5-30.5q-24 0-90 139-24 44-37 65-40 64-112 145-71 81-101 106-69 57-140 57h-32v640h32q72 0 167 32t193.5 64 179.5 32q189 0 189-167 0-26-5-56 30-16 47.5-52.5t17.5-73.5-18-69q53-50 53-119 0-25-10-55.5t-25-47.5h331q52 0 90-38t38-90zm128-1q0 105-75.5 181t-180.5 76h-169q-4 62-37 119 3 21 3 43 0 101-60 178 1 139-85 219.5t-227 80.5q-133 0-322-69-164-59-223-59h-288q-53 0-90.5-37.5t-37.5-90.5v-640q0-53 37.5-90.5t90.5-37.5h288q10 0 21.5-4.5t23.5-14 22.5-18 24-22.5 20.5-21.5 19-21.5 14-17q65-74 100-129 13-21 33-62t37-72 40.5-63 55-49.5 69.5-17.5q125 0 206.5 67t81.5 189q0 68-22 128h374q104 0 180 76t76 179z"/></svg>');}
<ul> <li id="theChampTabs-0-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-0').style.display='block';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';" class="theChampSelectedTab">Default Comments (2)</li> <li id="theChampTabs-1-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-1').style.display='block';theChampInitiateFB();document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';">Facebook Comments (<fb:comments-count href="http://unhabited.planet.ee/peretoetused/" fb-xfbml-state="rendered" class=" fb_comments_count_zero"><span class="fb_comments_count">0</span></fb:comments-count>)</li> <li id="theChampTabs-2-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-2').style.display='block';document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';">G+ Comments</li></ul><!-- patch to avoid error --><span id="theChampTabs-0"></span><span id="theChampTabs-1"></span><span id="theChampTabs-2"></span>
Using Font Awesome icons as bullets
The answer by Johan is incorrect.
Font Awesome uses web fonts, NOT a large background image!
It should be noted you can simply put the class onto the li tags, like so:
<ul>
<li class="icon-ok">Lists</li>
<li class="icon-ok">Buttons</li>
<li class="icon-ok">Button groups</li>
<li class="icon-ok">Navigation</li>
<li class="icon-ok">Prepended form inputs</li>
</ul>
However, there's one caveat, it won't work in ie7, even with the conditional ie7 stylesheet.
The list items disappear, just leaving the icons!
If your not supporting ie7, then simply leave out the conditional stylesheet, then at least those unfortunate enough to be using ie7 will still be able to read your lists, sans icons!
Hope this helps.
Related Topics
CSS Selector for Selecting an Element That Comes Before Another Element
Media Query for Devices Supporting Hover
How to Change the Link Color in a Specific Class for a Div CSS
Ie Alternative to Column-Count & Column-Gap
How to Remove the Hash from Compass's Generated Sprite Image Filenames
How to Create a CSS Only (Vertical) Drop-Down Menu
Absolute Positioning in Gmail Emails
<Img /> VS Background-Image (Css) in Performance
Immediate Child Selector in Less
How to Set a Common Image Path for Less Files
How to Generate CSS with Loop in Less
Rotating Table Header Text with CSS Transforms
Multiline-Flexbox in Ie11 Calculating Widths Incorrectly
Possible to Achieve This Mobile/Desktop Layout Using Bootstrap? (Or Other Grid)