Copy link to clipboard
Copied
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
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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/**for demo purposes**/
.fa {border: 1px solid red}
</style>
</head>
<body>
<h1>Font Awesome download<
...Copy link to clipboard
Copied
Is this a Bootstrap question? Can you please show us your code?
Copy link to clipboard
Copied
Yes, it is bootstrap. One version older than the current...
No need to show my code because I haven't modified anything!
Copy link to clipboard
Copied
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
https://getbootstrap.com/docs/3.3/components/
Sorry for the lack of specificity... It is the glyphicon halflings set
Copy link to clipboard
Copied
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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/**for demo purposes**/
.fa {border: 1px solid red}
</style>
</head>
<body>
<h1>Font Awesome download</h1>
<i class="fa fa-download"></i>
<i class="fa fa-download" style="font-size:24px"></i>
<i class="fa fa-download" style="font-size:36px"></i>
<i class="fa fa-download" style="font-size:48px;color:red"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-download"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
</body>
</html>
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.