Highlighted

Glyphicon

Explorer ,
Apr 18, 2018

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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">&#xf019;</i>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

736

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Glyphicon

Explorer ,
Apr 18, 2018

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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">&#xf019;</i>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

737

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 18, 2018 0
Adobe Community Professional ,
Apr 18, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
Explorer ,
Apr 18, 2018

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
LEGEND ,
Apr 18, 2018

Copy link to clipboard

Copied

A glyphicon is not always a font.

It is often an image -

https://glyphicons.com/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
Explorer ,
Apr 18, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
Explorer ,
Apr 18, 2018

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
Adobe Community Professional ,
Apr 18, 2018

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">&#xf019;</i>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
Explorer ,
Apr 18, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
Adobe Community Professional ,
Apr 18, 2018

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2018 0
Explorer ,
Apr 19, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 19, 2018 0