Utiliser la Police Impressionnant dans le bootstrap sans écraser les glyphes

Je voudrais utiliser certains de Police Impressionnant de polices dans mon application de démarrage. C'est un héritage de l'application et le client ne veut pas de nouvelles icônes. Les icônes en cours sont bootstrap glyphes. Police Impressionnant icônes sont très proches mais pas identiques. No big deal droit? Ne devrais-je pas être en mesure d'utiliser une police de caractères de la famille à utiliser la Police Génial et il suffit de mettre la bonne police de caractère pour l'icône que je veux.

J'ai la Police Awesome 'polices' répertoire de mon projet. Il contient 4 fichiers:

fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.tff
fontawesome-webfont.woff

Ce css dois-je ajouter pour que cela fonctionne?

Que dois-je balisage html looklike? J'ai vu des exemples de ce genre:

<g><text x="0" y="0">&#xf040</text></g>

Cependant lorsque je fais cela, ça ne fonctionne pas. Je sais que je suis absent quelques étapes. Des idées?

vérifier la solution s'il vous plaît et laissez-moi savoir si cela fonctionne pour vous
Cela peut être un cas de poser la mauvaise question. Notez qu'aucune des réponses utilisez le littéral caractère unicode références. L'utilisateur de la page de codes est volontairement dépourvu de sens, tandis que les classes CSS fournis par ces paquets de polices sont explicites dans ce sens. N'utilisez pas de caractères références directement et votre problème sera résolu.

OriginalL'auteur lostintranslation | 2013-02-20

  1. 8

    J'ai remplacé tous les "icône" pour "fw-icône-" dans la police-génial.fichier css.
    Ensuite, tous les fichiers d'amorce icônes toujours la même, et si j'ai besoin d'utiliser un FontAwesome icône ou de la classe, j'ai juste besoin d'utiliser "fw-" à l'avant.

    Exemple:

    <i class="fw-icon-2x fw-icon-star" data-toggle="tooltip" title="Starred"></i>

    Edit:

    Aujourd'hui, la Police Génial 4.0 a été publié et toutes les classes sont différentes à l'Amorçage des icônes de modèle:

    <i class="fa fa-camera-retro"></i> fa-camera-retro

    Vous pouvez voir ici: http://fontawesome.io/examples/

    Comme les deux polices sont distinctes, et les glyphes sont dans "l'utilisateur" page de codes UNICODE de toute façon, c'est la bonne solution. Espace de noms.

    OriginalL'auteur Blaze

  2. 0

    Je pense que ce n'est pas possible jusqu'à ce que vous renommez toutes les classes CSS de la Police de caractères Génial définit. Police Impressionnant est destiné à être un remplacement pour le Bootstrap avec les icônes et donc redéfinit tout de l'icône de l'* classes.

    OriginalL'auteur Robin

  3. -1

    Importantes* pour utiliser à la fois les glyphicons et fontawesome vous devez désactiver les icônes avec le même nom . Supposons que Vous souhaitez utiliser Glyphicons icon-screenshot de le désactiver dans fontawesome .
    Et ces icônes qui vous souhaitez utiliser à partir de fontawesome les désactiver dans les glyphicons .
    La première étape consiste à inclure fontawesome fichier css dans l'en-tête de section, après le bootstrap.fichier css,par exemple:

    Si vous souhaitez utiliser icon-file de fontawesome Que juste le désactiver dans le bootstrap.css . Comme cette
    /* icône de fichier {
    background-position: -24px -24px;
    } */

    <head>
 <link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

</head>

    Voir Jsfiddle Jsfiddle avec la police impressionnant

    Un simple bouton avec fontawesome icône:-

    <a class="btn" href="#">
<i class="icon-repeat"></i> Repeat</a>

    Nav Pilules avec la police génial :-

    <ul class="nav nav-pills">
     <li class="active"><a href="#"><i class="icon-file"></i> New File</a></li>
     <li><a href="#"><i class="icon-cut"></i> Cut</a></li>
     <li><a href="#"><i class="icon-edit"></i> Edit</a></li>
     <li><a href="#"><i class="icon-paste"></i> Settings</a></li>
</ul>

    Insérer un espace entre la fin je balise et les mots que vous tapez après .

    De cette façon, vous remplacez Bootstrap icônes de Police Génial, mais l'OP voulait avoir la Police Génial avec les icônes pour l'Amorçage de la!
    Si les icônes avec des noms différents seront utilisés à la fois l'image et le fontawesome peut être utilisé , de Même que les icônes de nom sera affiché deux fois .

    OriginalL'auteur Shail