come usare il font fantastico nel proprio css?

Sto usando bootstrap e Font Awesome. In una classe css personalizzata su cui sto lavorando ho provato ad includere le icone Font Awesome invece di usare le immagini. Ecco il mio codice prima di Font Awesome.come usare il font fantastico nel proprio css?

.data .close { 
    display: block; 
    float: right; 
    width: 30px; 
    height: 30px; 
    background: url(../img/close.png) top right no-repeat; 
    text-align: right; 
    outline: none; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
    opacity: 0.7; 
} 

.next { 
    right: 0; 
    float: right; 
} 

.next:hover { 
    background: url(../img/next.png) right 48% no-repeat; 
}

Ecco il mio codice utilizzando Font Awesome, che ovviamente non funziona. Le icone non mostrano. Qualche idea su cosa sto facendo male?

.data .close { 
    display: block; 
    float: right; 
    width: 30px; 
    height: 30px; 
    font-family: FontAwesome 
    content: "\f00d"; 
    text-align: right; 
    outline: none; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
    opacity: 0.7; 
} 


.next { 
    right: 0; 
    float: right; 
} 

.next:hover { 
    font-family: FontAwesome 
    content: "\f054"; 
}

html intestazione

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css"> 
</head> 

.... 

....

here is a fiddle of what i'm working on.

fonte

2013-08-12 user2636556

dove hai definito 'FontAwesome'? Puoi mostrare anche il tuo capo HTML? – Raptor

@ShivanRaptor domanda aggiornata – user2636556

puoi farlo utilizzando la pseudo :before o :after. Per saperne di più su di esso qui http://astronautweb.co/snippet/font-awesome/

modificare il codice per questo

.lb-prev:hover { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
    text-decoration: none; 
} 

.lb-prev:before { 
    font-family: FontAwesome; 
    content: "\f053"; 
    font-size: 30px; 
}

fare lo stesso per le altre icone. potresti voler regolare anche il colore e l'altezza delle icone. comunque ecco il fiddle speriamo che questo aiuti

fonte

2013-08-12 16:28:18

Lo spirito di carattere Web è quello di utilizzare la cache, per quanto possibile, quindi si dovrebbe utilizzare la versione CDN tra <head></head> invece di ospitare te stesso:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Inoltre, assicurarsi che è stato caricato il CSS DOPO la sopra la riga, o il tuo carattere personalizzato CSS non funzionerà.

Riferimento: Font Awesome Get Started

fonte

2013-08-12 03:29:40 Raptor

cosa succede se metto il mio css e font-fantastico nello stesso css. i file css e i file js sono memorizzati nella cache sul mio server – user2636556

ok, ma la cache non può condividere solo con le persone che usano lo stesso CSS. A proposito, il tuo problema è stato risolto? – Raptor

no, il davanzale non funziona. le immagini non mostrano. sto praticamente cercando di usare font fantastico con http://lokeshdhakar.com/projects/lightbox2/ – user2636556

come usare il font fantastico nel proprio css?

risposta

Problemi correlati