Stack Overflow
Stack Overflow

Questions tagged [glyphicons]

Glyphicons is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. A base subset of the library is included with Twitter Bootstrap.

Glyphicons is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. A base subset of the library is included with Twitter Bootstrap.

Traditionally images such as icons were placed on web pages via <img src="myimage.png /> tags. If a web page had hundreds of different images, there would be hundreds of requests from the web server to load them.

Glyphicons work differently. Hundreds of icons are on a single png file, then CSS will mask out a single icon. A typically Glyphicon will be shown on a page via <span class="glyphicon glyphicon-search"></span>. Because only a single png file was loaded, there is only one network request and all icons appear at once.

References

803 questions
375
votes
48 answers

Bootstrap 3 Glyphicons are not working

I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.
scooterlord
  • 15,124
  • 11
  • 49
  • 68
362
votes
16 answers

Add Bootstrap Glyphicon to Input Box

How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:
doovers
  • 8,545
  • 10
  • 42
  • 70
349
votes
10 answers

Bootstrap 4 - Glyphicons migration?

We have a project that uses glyphicons intensively. Bootstrap v4 drops the glyphicon font altogether. Is there an equivalent for icons shipped with Bootstrap V4? http://v4-alpha.getbootstrap.com/migration/
Vincent Poirier
  • 4,298
  • 5
  • 21
  • 25
250
votes
7 answers

How Do I Make Glyphicons Bigger? (Change Size?)

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?
CoderBryan
  • 2,717
  • 5
  • 16
  • 11
211
votes
7 answers

Bigger Glyphicons

How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x). This code will make my glyphicons big: How can I get…
guiomie
  • 4,988
  • 6
  • 37
  • 67
99
votes
6 answers

How to remove error about glyphicons-halflings-regular.woff2 not found

ASP.NET MVC4 Bootstrap 3 application is running from Microsoft Visual Studio Express 2013 for Web IDE. Chrome console shows always error http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2 Failed to load resource: the server…
Andrus
  • 26,339
  • 60
  • 204
  • 378
83
votes
3 answers

Font Awesome vs Glyphicons in Twitter Bootstrap

I am a beginner in web development and I recently started working with Twitter Bootstrap, I know it uses Glyphicons which I already know how to use. But I also came across Font Awesome which says that it is built for Bootstrap. What are the…
user2471133
  • 1,377
  • 3
  • 14
  • 15
67
votes
1 answer

How do I change Bootstrap 3's glyphicons to white?

I've got the glyphicons in my page, but they are black. How do I set the glyphicons to white?
user2654833
  • 701
  • 1
  • 6
  • 8
63
votes
10 answers

ASP.NET Actionlink with glyphicon and text with different font

I want to present a button with @Html.ActionLink but i need to have my application font in the text. With this code: @Html.ActionLink(" Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign"…
e4rthdog
  • 5,103
  • 4
  • 40
  • 89
63
votes
2 answers

Twitter bootstrap 3 - create a custom glyphicon and add to glyphicon "font"

I am running twitter bootstrap3, and I am extremely happy with the new way it handles the icon as fonts. However: I need some custom icons; I need to make them myself, and ideally integrate it into the existing font. I have searched with no luck. I…
benteh
  • 2,218
  • 4
  • 31
  • 41
57
votes
14 answers

Bootstrap 3 unable to display glyphicon properly

I am migrating from bootstrap 2.3 to bootstrap 3 and everything works well. But when I tried to add some icons, the icon font doesn't displayed properly. I tried to look over here http://bootply.com/61521 and only '.glyphicon-envelope' was being…
iSa
  • 1,144
  • 2
  • 9
  • 21
52
votes
4 answers

Add image in title bar

How do I add image in title bar? I have title- "Webnet" Merging it with a FontAwesome Glyphicon's icon images as- <i class="icon-user icon-black"></i>Webnet And I tried it replacing with image source- <img…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/favicon" class="post-tag grid--cell" title="show questions tagged 'favicon'" rel="tag">favicon</a> <a href="../../questions/tagged/font-awesome" class="post-tag grid--cell" title="show questions tagged 'font-awesome'" rel="tag">font-awesome</a> <a href="../../questions/tagged/glyphicons" class="post-tag grid--cell" title="show questions tagged 'glyphicons'" rel="tag">glyphicons</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 03 '13 at 12:08">asked Apr 03 '13 at 12:08</time> <a href="../../users/1982631/manoz" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1982631.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Manoz" /> </a> <div class="s-user-card--info"> <a href="../../users/1982631/manoz" class="s-user-card--link">Manoz</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,507</li> <li class="s-award-bling s-award-bling__gold" title="13 gold badges">13</li> <li class="s-award-bling s-award-bling__silver" title="68 silver badges">68</li> <li class="s-award-bling s-award-bling__bronze" title="114 bronze badges">114</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-18609819"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>51</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/18609819/how-to-flip-the-glyphicon-icon" class="question-hyperlink">How to flip the glyphicon icon</a></h3> <div class="excerpt">Is there any way to flip the glyphicon. I found Flip an Image CSS trick, but that does not work for the glyphicon. Please any suggestions </div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/icons" class="post-tag grid--cell" title="show questions tagged 'icons'" rel="tag">icons</a> <a href="../../questions/tagged/flip" class="post-tag grid--cell" title="show questions tagged 'flip'" rel="tag">flip</a> <a href="../../questions/tagged/glyphicons" class="post-tag grid--cell" title="show questions tagged 'glyphicons'" rel="tag">glyphicons</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 04 '13 at 09:14">asked Sep 04 '13 at 09:14</time> <a href="../../users/1290988/jamol" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1290988.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jamol" /> </a> <div class="s-user-card--info"> <a href="../../users/1290988/jamol" class="s-user-card--link">Jamol</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,768</li> <li class="s-award-bling s-award-bling__gold" title="8 gold badges">8</li> <li class="s-award-bling s-award-bling__silver" title="45 silver badges">45</li> <li class="s-award-bling s-award-bling__bronze" title="68 bronze badges">68</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-20694997"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>50</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>8</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/20694997/how-to-add-glyphicons-to-rails-link-to-helper-bootstrap-3" class="question-hyperlink">How to add glyphicons to rails link_to helper - Bootstrap 3</a></h3> <div class="excerpt">I've been looking everywhere for a good explanation of how to add glyphicons to rails link_to and button_to helpers, but I've found very little. What I've gathered so far has led me to this: <li> <%= link_to deals_path, class: "btn btn-default" do…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/ruby-on-rails" class="post-tag grid--cell" title="show questions tagged 'ruby-on-rails'" rel="tag">ruby-on-rails</a> <a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a> <a href="../../questions/tagged/glyphicons" class="post-tag grid--cell" title="show questions tagged 'glyphicons'" rel="tag">glyphicons</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 20 '13 at 01:48">asked Dec 20 '13 at 01:48</time> <a href="../../users/2448362/settheline" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2448362.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="settheline" /> </a> <div class="s-user-card--info"> <a href="../../users/2448362/settheline" class="s-user-card--link">settheline</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,333</li> <li class="s-award-bling s-award-bling__gold" title="8 gold badges">8</li> <li class="s-award-bling s-award-bling__silver" title="33 silver badges">33</li> <li class="s-award-bling s-award-bling__bronze" title="65 bronze badges">65</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-31196980"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>48</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>6</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/31196980/using-a-glyphicon-as-an-li-bullet-point-bootstrap-3" class="question-hyperlink">Using a Glyphicon as an LI bullet point (Bootstrap 3)</a></h3> <div class="excerpt">How can I change the bullet points in an HTML list and use the glyphicons that come with Bootstrap 3? So that: <ul> <li>...</li> <li>...</li> </ul> Displays as: [icon] Facere possimus, omnis voluptas assumenda est, numquam eius modi …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/twitter-bootstrap" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a> <a href="../../questions/tagged/twitter-bootstrap-3" class="post-tag grid--cell" title="show questions tagged 'twitter-bootstrap-3'" rel="tag">twitter-bootstrap-3</a> <a href="../../questions/tagged/glyphicons" class="post-tag grid--cell" title="show questions tagged 'glyphicons'" rel="tag">glyphicons</a> <a href="../../questions/tagged/bulletedlist" class="post-tag grid--cell" title="show questions tagged 'bulletedlist'" rel="tag">bulletedlist</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 03 '15 at 01:03">asked Jul 03 '15 at 01:03</time> <a href="../../users/195835/simon-east" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/195835.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Simon East" /> </a> <div class="s-user-card--info"> <a href="../../users/195835/simon-east" class="s-user-card--link">Simon East</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">55,742</li> <li class="s-award-bling s-award-bling__gold" title="17 gold badges">17</li> <li class="s-award-bling s-award-bling__silver" title="139 silver badges">139</li> <li class="s-award-bling s-award-bling__bronze" title="133 bronze badges">133</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <div class="s-pagination--item is-selected">1</div> <a class="s-pagination--item" href="../../questions/tagged/glyphicons_page=2" rel="" title="Go to page 2">2</a> <a class="s-pagination--item" href="../../questions/tagged/glyphicons_page=3" rel="" title="Go to page 3">3</a> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/glyphicons_page=53" rel="" title="Go to page 53">53</a> <a class="s-pagination--item" href="../../questions/tagged/glyphicons_page=54" rel="" title="Go to page 54">54</a> <a class="s-pagination--item" href="../../questions/tagged/glyphicons_page=2" rel="next" title="Go to page 2"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>