How to change list style with :: before?

Question

How to change list style with :: before?

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (0 votes)

0

I have a question about how to put a list-style:; with ::before .

I mean changing the circle of a messy list to a different icon with ::before

css3 css

asked by Reyes Jose 03.01.2018 в 04:08

source

3 answers

Declared functions vs Expressed functions Error inserting MySQL data with PHP

score 3 · Answer 1

You can use the list-style property that has CSS without using before to customize the icon:

<ul style="list-style-type: square">
<ul style="list-style-type: disc">
<ul style="list-style-type: circle">

or if you need a custom icon, use an image as an icon with list-style-image :

ul { 
    list-style-image: url("imagenes/icono.png");
}

Here more information: Custom Lists

using FontAwesome using content and its unicode value:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f01c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

score 2 · Answer 2

ul {
    list-style: none;
}
li::before {
    display: inline-block;
    content: '×';
    margin-right: 0.5rem;
}
li {
    text-indent: -0.75em;
}

<ul>
    <li>Texto corto</li>
    <li>texto largo para probar el salto de línea, lorem ipsum dolor sit</li>
    <li>Otra línea</li>
</ul>

JS bin

score 0 · Answer 3

The solution was the following:

 footer .enlaces .contenedor .lista ul li::before {
      display: inline-block;
      content: '\f054';
      font-family: 'FontAwesome';
      color: #0f0f19;
      margin-right: 5px; 
}