Comment puis-je remplacer Bootstrap & lt; blockquote & gt; border-left avec une icône FontAwesome en CSS?

Lorsqu'un <blockquote> apparaît dans mon div, je voudrais le remplacer afin qu'il utilise FontAwesome de icon-quote-left par opposition à la border-left: 5px rgb.... valeur, il utilise maintenant.

Comment puis-je le faire en utilisant simplement CSS?

Je ne veux pas utiliser de JS - parce qu'il ajoute trop de charge à la page.

source d'informationauteur marcamillion

  1. 14

    Vous pouvez le faire avec un CSS Pseudo-élément. Voici un JSFiddle à démontrer: http://jsfiddle.net/cvADH/

    /* Override the bootstrap style */
blockquote {
    border-left: none;
}

/* Insert the pseudo element - replicating what FontAwesome does */
blockquote:before {
    content: "\f10d"; 
    font-family: FontAwesome;
    float: left;
    margin-right: 10px;
}
  2. 0

    Désolé sur iPad ne peut donc pas donner une réponse précise, mais la logique serait d'ouvrir bootstrap CSS trouver l'endroit précis où l'icône de la blockqote est déclarée et de la remplacer par votre propre CSS qui va probablement à quelque chose comme la désactivation de bootstrap styles d'arrière-plan de l'image/position interrupteur de police-famille, et sans doute ajouter un contenu: 'char' qui combine le caractère qui correspond à la police impressionnant de caractère.

    Mise à jour:
    Voir ici comment c'est fait

    FontAwesome

    .icon-glass:before { content: "\f000"; }

    https://github.com/malarkey/320andup/blob/master/less/font-awesome.less

    BootStrap

    .icon-glass { background-position: 0 0; }

    https://github.com/twitter/bootstrap/blob/master/less/sprites.less