Skip to main content
Inspiring
July 13, 2017
Answered

Using GLYPHICONS

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 is closed to new replies. Start a new post to keep the conversation going.
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.

23 replies

karpiyonAuthor
Inspiring
July 14, 2017

but this is only PNG...

Translate
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

Translate
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.

Translate
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...

Translate
BenPleysier
Community Expert
Community Expert
July 14, 2017

Translate
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. 

Translate
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.

Translate
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.

Translate
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;

}

Translate