Glyphicon

Report · Apr 18, 2018

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

Report · Apr 18, 2018

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 18, 2018

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

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

Report · Apr 18, 2018

A glyphicon is not always a font.

It is often an image -

https://glyphicons.com/

Report · Apr 18, 2018

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

Report · Apr 18, 2018

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

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

Report · Apr 18, 2018

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>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 18, 2018

Thank you so much for referring me to font awsome, Nancy. I'll hand you the Correct Answer this time even if the specific issued wasn't resolved. Gotten the idea that it's something intricate having to do with the structure of the glyphicons...

Didn't know that they weren't used in v4 but the reason I just went with one older version this time was the convenient icon bars, which I wanted to transform using css3 haha. Suppose I could've worked around that problem pretty quickly using bootstrap v4, but this website will be upgraded this summer when I get time over and then I'll choose the latest bootstrap version

Thank you so much Nancy and btw I am still thankful for your tip and tutorial on rss2html

Report · Apr 18, 2018

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!

Report · Apr 19, 2018

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.

Glyphicon

1 Correct answer