CSS with custom list-style-type on awesome fonts

Asked

Viewed 582 times

1

How can I change 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>

html5 css3

2 answers

2

How about using the pseudo elemente ::after?

First you take the style-list default of the Browser, then with the ::after you make a Bullet customized.

Notice that the no ::after I use the font-family:FontAwesome; and in the content:"\f00c"; I use a Fontawesome code reference. Here is a list with all official codes: http://fontawesome.io/cheatsheet/ (to use in contente replace the &#x for \ )

.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>

  • And how do I find the code of the icons?

  • @britodfbr just included a Link with all the icon on the official website look there

  • Thank you very much!!! D

  • @britodfbr was worth young, any problem is just talk, but I already use it for a long time and always works 100%

0


Final result after help from 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>

  • 1

    Wow, young man, I didn’t understand you, if your answer is a copy of mine, why do you dismiss it as the correct answer if it is the original?

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.