How Do I Make Glyphicons Bigger Change Size

Question

I would like to make the globe glyphicon bigger so that it covers up a large portion of the page  it s a vector image   It s not in a button or anything  it s just alone  Is there a way to do this    lt div class    jumbotron  gt       lt span class  glyphicon glyphicon-globe  gt  lt  span gt   lt  div gt

User · Answer

If you are using bootstrap and font-awesome then it is easy  no need to write a single line of new code  just add fa-Nx  as big you want  See the  demo   lt span class  glyphicon glyphicon-globe  gt  lt  span gt   lt span class  glyphicon glyphicon-globe fa-lg  gt  lt  span gt   lt span class  glyphicon glyphicon-globe fa-2x  gt  lt  span gt   lt span class  glyphicon glyphicon-globe fa-3x  gt  lt  span gt   lt span class  glyphicon glyphicon-globe fa-4x  gt  lt  span gt   lt span class  glyphicon glyphicon-globe fa-5x  gt  lt  span gt

User · Answer

Fontawesome has a perfect solution to this   I implemented the same  just on your main  css file add this   gi-2x font-size  2em    gi-3x font-size  3em    gi-4x font-size  4em    gi-5x font-size  5em     In your example you just have to do this    lt div class    jumbotron  gt       lt span class  glyphicon glyphicon-globe gi-5x  gt  lt  span gt   lt  div gt

User · Answer

I ve used bootstrap header classes   h1    h2   etc   for this  This way you get all the style benefits without using the actual tags  Here is an example    lt div class  h3  gt  lt span class  glyphicon glyphicon-tags  aria-hidden  true  gt  lt  span gt  lt  div gt

User · Answer

Increase the font-size of glyphicon to increase all icons size    glyphicon       font-size  50px      To target only one icon     glyphicon glyphicon-globe       font-size  75px

User · Answer

For ex    add class    btn-lg - LARGE  btn-sm - SMALL   btn-xs - Very small   lt button type button class  btn btn-default btn-lg  gt   lt span class  glyphicon glyphicon-star  aria-hidden true gt  lt  span gt  Star  lt  button gt     lt button type button class  btn btn-default  gt   lt span class  glyphicon glyphicon-star  aria-hidden true gt  lt  span gt Star  lt  button gt     lt button type button class  btn btn-default btn-sm  gt   lt span class  glyphicon glyphicon-star  aria-hidden true gt  lt  span gt  Star  lt  button gt     lt button type button class  btn btn-default btn-xs  gt   lt span class  glyphicon glyphicon-star  aria-hidden true gt  lt  span gt  Star  lt  button gt     Ref link Bootstrap    Glyphicons Bootstrap

User · Answer

Yes  and basically you can also use inline style       lt span style  font-size  15px  class  glyphicon glyphicon-cog  gt  lt  span gt

User · Answer

try to use heading  no need extra css   lt h1 class  glyphicon glyphicon-plus  gt  lt  h1 gt

[html] How Do I Make Glyphicons Bigger? (Change Size?)

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to glyphicons