Skip to main content
Inspiring
July 13, 2017
Answered

Using GLYPHICONS

  • July 13, 2017
  • 4 replies
  • 3782 views

Hi,

I am using bootstrap yet i cannot see glyphicons from GLYPHICONS.com

e.g.:

<div class="myPanel-heading">products <span class="glyphicon glyphicons-pictures" aria-hidden="true"></span></div>

is this included in dw bootstrap or were glyphicons removed?

This topic has been closed for replies.
Correct answer osgood_

Bootstrap recommends you use Font Awesome.

Font Awesome, the iconic font and CSS toolkit

Font Awesome is free, glyphicons are dead, Bootstrap v4 has dropped them.

4 replies

karpiyonAuthor
Inspiring
July 14, 2017

but this is only PNG...

Nancy OShea
Community Expert
Community Expert
July 14, 2017

Just do a Google search for "icon fonts" and you'll find plenty to choose from.

Nancy

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
Community Expert
July 15, 2017
First it is still bloated but v4 is now within acceptable limits, and anyone using jQuery + the jQuery UI code would i think accept the extra css code without problems.

Amazing! When I say that I try to keep my images below 100KB and certainly no more than 400KB, I get sneered at as being unrealistic. Yet, when done properly, the whole Bootstrap thingy takes up no more than two of my images. Bloated????? Having said that, who determines acceptable limits?

As for the rest of your rhetoric, if I cannot get something done using one tool, I will resort to using another tool. In the case of Bootstrap, it may mean inserting my own code.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
paulk7737514
Inspiring
July 14, 2017

$59 for little icons? That's nuts...

BenPleysier
Community Expert
Community Expert
July 14, 2017

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Community Expert
Community Expert
July 13, 2017

Depends on which Bootstrap version you're using.

Glyphicons are supported in 3x but not in alpha 4. 

Nancy O'Shea— Product User & Community Expert
osgood_Correct answer
Legend
July 13, 2017

Bootstrap recommends you use Font Awesome.

Font Awesome, the iconic font and CSS toolkit

Font Awesome is free, glyphicons are dead, Bootstrap v4 has dropped them.

karpiyonAuthor
Inspiring
July 13, 2017

thank you,

Do you know how i can center text pull-right the glyphicon?

e.g. i have:

<div class="myPanel-heading"><i class="fa fa-picture-o pull-right" aria-hidden="true"></i>Gallery</div>

in the css myPanel has text-align: center yet this still takes into account the space occupied by the glyphicon, hence the text is not exactly in the middle.

I also tried to set the icon to float left as well as set the parent element to relative position and the icon to absolute.

Legend
July 13, 2017

karpiyon  wrote

thank you,

Do you know how i can center text pull-right the glyphicon?

e.g. i have:

<div class="myPanel-heading"><i class="fa fa-picture-o pull-right" aria-hidden="true"></i>Gallery</div>

in the css myPanel has text-align: center yet this still takes into account the space occupied by the glyphicon, hence the text is not exactly in the middle.

I also tried to set the icon to float left as well as set the parent element to relative position and the icon to absolute.

It should work if you use the below css:

.myPanel-heading {

text-align: center;

position: relative;

}

.myPanel-heading i {

position: absolute;

right: 0;

}