Bootstrap glyphicon: 100% de la largeur

Dans ma webapp j'ai un glyphicon contenue dans une div à l'intérieur d'une grille.

J'aimerais comme la glyphicon être pleine largeur et de hauteur proportionnelle (à être affiché correctement).

Comment puis-je faire ?

Plunker est: http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview

HTML est:

  <body>
    <div class="container-fluid">
     <div class="row">
       <div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red">
         <span class="glyphicon glyphicon-star"></span>
       </div>
     </div>
    </div>
  </body>

CSS est:

.glyphicon {
  width: 100%;
  color: green;
  border: 3px solid green;
}

Ce qui concerne.

glyphicons sont comme des personnages... vous devriez essayer de définir une taille de police pour définir la taille des icônes... mais essaye de le mettre à 100% de la largeur sera un peu délicate...
seule "vraie voie" pour faire le travail, sans utiliser des requêtes de médias et de la taille de police serait d'utiliser votre glyphicon comme une image... / img-responsive...
vous pourriez expérimenter avec font-size:25vw changer le numéro de la police est la même proportion de fenêtre largeur de l'élément conteneur. En supposant que l'élément est toujours la même proportion.

OriginalL'auteur user3181983 | 2015-07-10

  1. 0

    Glyphicons sont en fait des caractères dans une police spéciale de sorte qu'ils ne sont pas vraiment à l'échelle comme ça. Si vous voulez vraiment le faire, vous devez créer une image et de la portion de route avec width: 100% par exemple.

    Un autre possible (mais mauvaise) solution serait d'utiliser des transformations CSS, mais c'est un hack, n'est pas mise à l'échelle automatique et nécessite quelques hacks supplémentaires pour positionner correctement:

    .glyphicon:before {
  margin-left: 120px;
  display:inline-block;
  transform:scale(17,1);
  -webkit-transform:scale(17,1);
  -moz-transform:scale(17,1)
  -ms-transform:scale(17,1);
  -o-transform:scale(17,1); 
}

    Exemple: http://plnkr.co/edit/Xk19bLqZKj7sDulZ6AiH?p=preview

    OriginalL'auteur DavidG