Submitted by martin on Lun, 06/10/2019 - 08:39

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador

        }

        #lista ol li:before{
            content:counter(contador) ".- " ;
            color:grey;
            margin-left:50px;
        }

 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

No caso de queren engadir unha icona de font awesome, deberemos de seleccionar a fonte polo código unicode. Neste exemplo escollemos a imaxe de play, con código unicode f144, tal e como podemos ver na seguinte imaxe:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador;
        }

        #lista ol li:before{
            font-family: FontAwesome;
            content: "\f144  " counter(contador) ;
            
            color:grey;
            margin-left:60px;
        }
 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

Ou tamén engadindo a clase na etiqueta <li> dentro do body

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            display: inline;
        }

        #lista ol li:before{
           
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>
        
        
    <section id="lista">
        <ol>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>

     
        </ol>
    </section>
</body>
</html>

No caso de que teñamos a imaxe da icona descargada, podemos engadila do seguinte xeito:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            list-style-image:url(./iconos/claqueta_negra.png);
        }

        #lista ol li:before{
            
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>      
        
    <section id="lista">
        <ol>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>     
        </ol>
    </section>
</body>
</html>