A

Anonymous

Answered

Glyphicon

Forum|Forum|7 years ago
April 18, 2018
3 replies
1422 views

Best Adobe Community,

Example for you to try out in order to encounter the issue yourself: create a div element and put a glyphicon inside it. If you use the funcion inspect and then mouse over the div, you'll notice that the width and height of the div do not coincide with that of the glyphicon (the width and height of the glyphicon are namely correct [meaning: that of the chosen font-size]). At first glance and that you may have noticed without using the inspect function, it looks as if it has padding that you need to override with a custom class... But doing that does not affect it... I've also tried the position declaration with no success...

I want to remove ALL of this space!

Thank you so much on beforehand and have a continous pleasant future!

Best Regards,

Andreas

This topic has been closed for replies.

Correct answer Nancy OShea

https://getbootstrap.com/docs/3.3/components/

Sorry for the lack of specificity... It is the glyphicon halflings set

Bootstrap v4 does not contain glyphicons. Suggest you use Font Awesome icons instead.

Below is an example of Font Awesome with a border around the icon.

<!doctype html>

<html>

<head>

<title>Font Awesome Icons</title>

<style>

/**for demo purposes**/

.fa {border: 1px solid red}

</style>

</head>

<body>

<h1>Font Awesome download</h1>

<br>

<p>Used on a button:</p>

<button style="font-size:24px">Button <i class="fa fa-download"></i></button>

<p>Unicode:</p>

</body>

</html>

BenPleysier

Community Expert

It would have been nice for you to have shown your code, that way we do not have to speculate.

The space that you are seeing is caused by the padding of the container element plus the padding/margins of the font that is being used. If no font has been specifically applied to the Glyphicon, then the document default will be used. All this means is that you should use a container that has no dimensions, which is the reason why Nancy, in her example, has used the <i> element as the container.

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

A

Anonymous

Sorry. Removed my comment because it was inaccurate...

I found two solutions:

First solution: Add a display:block and position:static to the span, which is responsible for creating the glyphicon.

Second solution: Add a position:static and float:left (or right) to the span, which is responsible for creating the glyphicon, and the clearfix to the parent element.

pziecina

Legend

A glyphicon is not always a font.

It is often an image -

https://glyphicons.com/

A

Anonymous

The glyphicon is added by a span tag for example <span class="glyphicon glyphicon-download"></span> and, as I said, is one version older than the latest

A

Anonymous

https://getbootstrap.com/docs/3.3/components/

Sorry for the lack of specificity... It is the glyphicon halflings set

Nancy OShea

Community Expert

Is this a Bootstrap question? Can you please show us your code?

Nancy O'Shea— Product User & Community Expert

A

Anonymous

Yes, it is bootstrap. One version older than the current...

No need to show my code because I haven't modified anything!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded