Impossibile ridimensionare il flaticon con font-size

Sto utilizzando Flaticon per un sito Web che sto sviluppando ma sembra che ci sia qualcosa di sbagliato e non riesco a scoprire cosa.Impossibile ridimensionare il flaticon con font-size

Ho scaricato il file zip da flaticon con l'opzione "font font". quindi l'ho caricato nella cartella del mio carattere ma per qualche ragione quando collego il css e inserisco uno <i class="flaticon-crowd"><i> nel mio html ottengo l'icona nella sua dimensione predefinita ma quando inserisco font-size:70px; nel css non si ingrandisce.

Posso fare color: #f00; e il testo diventa rosso, quindi non è il selettore. Anche negli strumenti def in chrome mostrano che la dimensione font 70px è usata e non annullata.

Qualcuno sa che cosa potrebbe causare questo problema?

grazie per il vostro tempo.

Ecco un esempio di codice HTML che uso

<!DOCTYPE html> 
<html> 
    <head> 
     <!-- flaticon --> 
     <link rel="stylesheet" type="text/css" href="assets/css/flaticon/flaticon.css"> 

     <title></title> 
    </head> 
    <body> 
     <i style="font-size: 70px" class="flaticon flaticon-crowd"></i> 
    </body> 
</html>

fonte

2015-08-13 Controvi

@paulie Ho visto esempi che usano dimensioni font, ma ho anche provato a usare dimensioni e altezza ma non ha avuto alcun effetto sull'icona. Inoltre non c'è modo di ricreare questo. è costruito nella pagina e è appena successo. Inizio a pensare che potrei scontrarmi con qualcosa di simile. – Controvi

Ho appena aggiunto l'esempio di codice. in quella situazione non funziona. anche come stato nell'OP ho scaricato il fonticon zip. Inoltre ha seguito le istruzioni su come aggiungerli alla pagina. Su altri siti web è usato con font-size così come l'ho scaricato come fonticon presumo che sia visto come font e non come qualcos'altro – Controvi

OK ... hai qualche CSS ... come il '@font -face' statement per caricare il font. Diamine, hai un link a una pagina dal vivo che possiamo guardare ... forse sarebbe più semplice? –

Utilizzare questa classe in il tuo css per cambiare la dimensione del carattere.

 
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { 

font-size: 150px; 

}

Spero che risolva il problema.

fonte

2015-08-13 10:16:28

Buon punto e appena provato ma non ha funzionato. ci sono alcuni siti web che so usarlo e usano font-size per. Quindi 'dovrebbe' funzionare ma non ho idea di cosa sto facendo male – Controvi

Ho cambiato la risposta. questo ho controllato le sue opere al mio fianco. –

ha funzionato come un fascino. È piuttosto strano che non funzioni con le classi normali e il ridimensionamento dei caratteri Grazie per l'aiuto! – Controvi

di sicuro si potrebbe aggiungere !important la tua dichiarazione css

Ad esempio:

font-size:100px !important;

fonte

2015-08-13 10:06:37 Nabi

è che non viene sovrascritto. Ma ho provato a usare l'importante, ma purtroppo non ho fatto nulla. – Controvi

@Controvi uso http://fortawesome.github.io/Font-Awesome/ – Nabi

Sono ma non hanno l'icona di cui ho bisogno. ;) – Controvi

Utilizzare la pseudo classe: prima di modificare l'icona come si desidera. È possibile applicare tutte le proprietà di testo di css per modificare le icone.

.flaticon-crowd:before { 
    font-size: 17px; 
}

fonte

2015-08-26 09:44:29 rubikcube

-1

Basta eliminare il 'font-size: 20px;' trovato nel file flaticon.css e quindi sarai in grado di impostare la dimensione desiderata nel tuo file css.

fonte

2015-09-27 08:58:08 Ingridk

questo ha funzionato per me:

.flaticon-fast46::before{ 
font-size: 40px;}

fonte

2015-11-01 19:29:48 Aleksa

Una soluzione migliore sarebbe:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, 
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { 

font-size: 1em; 

}

Poi la dimensione dell'icona può essere modificato da altre classi utilizzando font-size

fonte

2015-12-02 22:26:50 Roger

In flaticons.css cambia la classe predefinita in questo:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, 
[class^="flaticon-"]:after, [class*=" flaticon-"]:after { 
    font-family: "Flaticon" !important; 
    font-style: normal !important; 
    font-weight: normal !important; 
    font-variant: normal !important; 
    text-transform: none !important; 
    speak: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

fonte

2016-03-24 09:47:19 ecmedia

Ha funzionato per me. Aggiungi :before dopo la classe di elementi che desideri utilizzare per le icone.

span:before{ 
font-size: 50px; 
}

fonte

2017-12-21 11:05:31

Impossibile ridimensionare il flaticon con font-size

risposta

Problemi correlati