Come includere i glyphicon senza usare il bootstrap CSS

Il progetto del mio cliente utilizza alcuni HTML e CSS di base. Ma a loro piacciono i Glyphicon sui menu del sito web. Quindi ho solo cercato di includere Glyphicons con i CSS Bootstrap, ma l'altro css è stato colpito dopo aver incluso i CSS di Bootstrap.Come includere i glyphicon senza usare il bootstrap CSS

Quindi la domanda potrebbe essere sciocca, voglio solo includere Glyphicons nei collegamenti del menu del sito Web del cliente senza cst di bootstrap.

È possibile prima? So che Glyphicons sarà disponibile gratuitamente con il pacchetto Bootstrap.

E altre cose è che il mio cliente non vuole che includa i CSS di Bootstrap poiché influisce sulla struttura della pagina.

Quindi è possibile includere Glyphicon senza Bootstrap css o il mio css personalizzato?

Qualsiasi aiuto sarebbe apprezzato!

fonte

2016-05-25 Raja

Alternativa; 'Font Awesone' – HddnTHA

Dovrai acquistare la versione PRO se vuoi usarla senza bootstrap. –

Passare definitivamente a http://fontawesome.io –

Ecco un pacchetto scrigno che è possibile utilizzare solo glyphicon su tutto il bootstrap.

controllare questo repository github https://github.com/ohpyupi/glyphicons-only-bootstrap

bower install glyphicons-only-bootstrap

EDIT

Ora è possibile scaricare il pacchetto tramite NPM.

npm install glyphicons-only-bootstrap

fonte

2016-09-06 16:49:51 supergentle

Dal momento che ho già lasciato un commento scarso oggi (vedi sopra): Le persone che ridimensionano le risposte senza lasciare un commento spiegando perché dovrebbe essere bandito dallo Stack Exchange! Cosa è successo quando hanno provato a seguire questo consiglio? O lo ignoravano in modo ignorante o insensibile perché non usano Bower? –

Ci sono molte persone ingannate da qualcosa solo per la sua eleganza e per quanto sofisticata. Sono totalmente d'accordo con te. Diventa sempre più complicato fare domande e lasciare una risposta nel flusso di stackover. Sono felice che circa 400 persone visitino il repository ogni due settimane e ottengano ciò che vogliono per lo sviluppo quotidiano. – supergentle

Sì, avete solo bisogno di scaricare da questa pagina: http://glyphicons.com/ (opzione gratuita sotto)

EDIT: In questa discussione maggiori informazioni su questo: Bootstrap 3 Glyphicons CDN

fonte

2016-05-25 22:04:55

Sì. Ma la versione gratuita non ha l'opzione css, solo png disponibile. Per la versione CSS di nuovo, ho bisogno di andare alla versione Pro o Bootstrap. Grazie. – Raja

E non è possibile prendere i file css e font dal bootstrap e usarlo solo? Non sono sicuro della fattibilità di questo, ma è un'idea. Oppure puoi provare a usare Font Awesome come ti ha detto HdddnTHA –

stavo cercando di ottenere glyphicons di Bootstrap di lavorare senza installare l'intero file bootstrap.css, ma a metà strada attraverso di essa divenne troppo lavoro e ho rinunciato. Invece, mi sono imbattuto in Font Awesome. Bootstrap 3 stesso lo usa (o usato per usarlo). È progettato per essere utilizzato come standalone, quindi è davvero semplice e leggero. Tutto quello che devi fare è:

Download Font Impressionante pacchetto;
Copia font-awesome.min.css nella cartella css e tutti i file di carattere dalla cartella Font di Font Awesome nella cartella dei caratteri;
Includere <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> nello <head> del codice HTML;
Scegli le icone dallo icon library e inseriscile nell'app proprio come faresti con i glyphicon di Bootstrap.

fonte

2016-09-11 12:43:36

Grazie a questo ha aiutato molto! – jhell

Forse sto sbagliando qualcosa, ma non vedo come possa funzionare. FontAwesome utilizza classi diverse, quindi se stai utilizzando una libreria che prevede classi di GlyphIcon, ad es. '', non apparirà nulla. Mi piace usare FontAwesome, ma sfortunatamente, la libreria di terze parti che voglio utilizzare si aspetta GlyphIcons, anche la versione non Bootstrap. (Forse questa è una svista sull'autore della biblioteca, ma sto cercando di aggirarlo.) –

C'è questo:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

Tuttavia, se si vuole risparmiare un po 'di larghezza di banda, è possibile caricare i font direttamente da una CDN e poi inline CSS necessario, in questo modo:

<style> 
@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot'); 
    src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 
.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font: normal normal 16px/1 'Glyphicons Halflings'; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    margin-right: 4px; 
} 
/* Add icons you will be using below */ 
.glyphicon-fire:before { 
    content: '\e104'; 
} 
.glyphicon-eye-open:before { 
    content: '\e105'; 
} 
</style>

È possibile visualizzare un esempio nel demo here (voci di menu "Occhio di Medusa" e "Pioggia di fuoco").

fonte

2017-03-02 10:37:10 10basetom

Per downvoter: si prega di fornire un feedback costruttivo se questa soluzione non funziona per voi. – 10basetom

Non sono stato io a farti downvotare, e odio davvero le persone che sono downvote senza lasciare ragione, il sito dice anche di lasciare un commento! Ma il tuo collegamento CDN riempie ancora il CSS standard (anche se afferma di "normalizzarlo"), quindi ha essenzialmente lo stesso problema che fa Bootstrap, e quindi non risponde realmente alla domanda. Tuttavia, il CSS esplicito che hai postato qui non ha quel problema, che in definitiva è il motivo per cui ho votato la tua risposta, grazie! Non sono d'accordo sul fatto che risparmi la larghezza di banda, comunque. L'intero punto delle CDN è che i browser possano memorizzare le librerie e caricare il server web. –

@ MichaelScheper ringrazia per il commento. Questo è stato un po 'di tempo fa, ma penso che quando ho detto "conserva una certa larghezza di banda" intendevo invece scaricare l'intera libreria Bootstrap solo per usare i font di icone, possono semplicemente collegarsi direttamente ai font. – 10basetom

Ho avuto lo stesso problema con Bootstraps, ho solo bisogno di una freccia ma lo rovino quando l'ho aggiunto.

Quindi mi sono trasferito in FontAwesome, funzionato magnificamente!

È possibile anche ottenere il CDN che assomiglia a questo:

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

È necessario per ottenere i vostri! :)

fonte

2017-06-11 08:35:56 George

Questa è effettivamente la stessa risposta di Arthur sopra. https://stackoverflow.com/a/39436226/1450294 Grazie per il tuo consiglio, ma per favore vedi il mio commento lì per il motivo per cui non penso che sia utile. (Non ti proverò di nulla e toglierò il tuo punto di reputazione. Ti incoraggio a leggere altre risposte prima di scrivere le tue, e familiarizzare con le abitudini di StackExchange.) –

Come includere i glyphicon senza usare il bootstrap CSS

risposta

Problemi correlati