CSS with custom list-style-type in awesome fonts

Navigation
1

How can I alert the list-style-type bullet to a fontawesome icon? 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
ul#a {
   list-style-position: inside;
   list-style-type: square;
}
ul#b{
   list-style-image: url('css/sqpurple.gif');
   list-style-position: inside;
   }

ol#c {
    list-style-type: upper-roman;
}

ol#d {
    list-style-type: lower-alpha;
}
li::before{content: "<i class="fa fa-hand-o-right" aria-hidden="true"></i>";}
ul::after{
   list-style-type: none;
   /*content: "<i class="fa fa-hand-o-right" aria-hidden="true"></i>";*/
   /*content: "-";*/
  }

li::before {
   content: "- ";
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><i class="fa fa-hand-o-right" aria-hidden="true"></i>
</p><p><ul><li>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas </li><li> lobortis nisi eu risus molestie rutrum. Phasellus et facilisis tellus. 
</li><li> Nullam a urna est. Suspendisse convallis, enim et viverra volutpat, mauris dui malesuada libero, et pretium sem mauris et ex. Aenean sodales nibh et quam semper, nec feugiat leo dapibus. 
</li></ul>

<ul id='a'><li>Curabitur sollicitudin eget odio eu accumsan. 
</li><li> In quis elit auctor, aliquam nisl vel, dignissim risus. 
</li><li> Duis posuere sed dui et accumsan. Etiam pharetra sapien non velit consequat, eget ultrices neque porta. 
</li></ul>

<ul id='b'><li> In mattis erat diam, eu tempor velit pharetra sed. 
</li><li> Pellentesque convallis libero ut sagittis bibendum. 
</li><li> Ut laoreet lacus libero, eleifend accumsan ante fermentum sit amet. 
</li><li> Quisque tristique hendrerit pellentesque. 
</li><li> Mauris magna justo, auctor sit amet risus ac, dignissim efficitur ante. Donec nec pretium urna.
</li></ul>
<ol id="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol id="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>
    
asked by anonymous 24.01.2018 / 19:31

2 answers

0

Final result after the help of colleague @hugocsl. 

<!DOCTYPE html>
<html>
<!--
http://fontawesome.io/cheatsheet/
-->
<head>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
ul{
   list-style: none;
}
ul li::before{
   font-family: FontAwesome;
   content:"\f138 ";
   margin-left: -1.5em;
   transform: scale(1, 1);
   }
</style>
</head>
<body>
<h1>The display Property</h1>

<ul><li> afasdfasdf
</li><li> asdfasdfasd
</li><li> font-family
</li><li> FontAwesome;
</li></ul>
</body>
</html>
    
26.01.2018 / 11:46
2

How about using pseudo elemente ::after ?

First of all, you should remove the% default from the Browser, then with style-list you make a custom bullet.

Note that at no :: after I use ::after and in font-family:FontAwesome; I use a FontAwesome code reference. Here is a list with all official codes: link (to use in content:"\f00c"; replace contente with &#x ) 

.lista {
    font-size: 20px;
    font-size: 1.25rem;
    margin-left: 23px;
    list-style: none;
}
.lista li::before {
    font-family: FontAwesome;
    float: left;
    margin-left: -1.5em;
    content: "\f00c";
    color: #d91f26;
    transform: scale(1, 1);
    position: absolute;
    margin-top: 2px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="lista">
    <li>Projetos de construções e reformas</li>
    <li>Soluções profissionais em engenharia</li>
    <li>Sondagens e fundações</li>
    <li>Projetos e estudos estruturais</li>
    <li>Soluções em containers</li>
</ul>
    
24.01.2018 / 20:09
increment event after a certain time Url redirection by company