Adjust the margin/padding of the Glyphicon within a Bootstrap badge

Currently, I have a glyphicon inside a badge and I want the glyphicon to have a smaller font size than the text. While I've achieved this, the issue now is that the glyphicon is not vertically centered within the badge.

Whenever I attempt to add margin-bottom or padding-bottom, it ends up affecting the entire badge instead of just the glyphicon element.

Below is the CSS class I am currently using:

.glyphicon-test3 {
  margin-right: 5px;
  font-size: 6px;
  padding-bottom: 8px;
}

Here is the corresponding HTML code:

<div>
  <span id="test" class="badge">

    <span class="glyphicon glyphicon-plus-sign glyphicon-test3"></span>

    Small icon with padding

  </span>
</div>

I've created a PLNKR to demonstrate the issue: http://plnkr.co/edit/VBIeaffmFujY2qcdPcVI

Any suggestions on how to resolve this?

htmlcsstwitter-bootstrap

Answer №1

To fix the issue, simply include top:-1px and replace the current top: 1px within the .glyphicon selector

.glyphicon {
    position: relative;
    top: 1px; <<<This is causing the problem
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

Therefore,

.glyphicon-test3 {
  margin-right: 5px;
  font-size: 6px;
  line-height: 2;
  top: -1px; <<<Here
}

Note: Padding has been removed and height has been added

Fiddle

Answer №2

The issue lies within the "top: 1px" property defined in the glyphicon class. To improve this, consider overriding it to 0 or -1. Additionally, adjust the line-height value, which currently stands at 1, for better results.

Answer №3

After some experimentation with my CSS, I found a solution that worked perfectly for my needs. Good luck!

.glyphicons::before {
    padding: 0px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

embedding HTML code directly into an iframe

Can HTML be directly inserted into an iframe within my HTML template? Would the following code be considered valid? <iframe> <html> <head> </head> <body> <p>Hello world</p> </body> ...

htmliframe

Aligning a table at the center of another table

Frustration has been brewing within me all week as I grapple with the task of sending out an important emailer soon. The challenge lies in aligning these product images next to their descriptions at the center, a feat that seems impossible to achieve withi ...

htmlcsshtml-table

Craft an Interactive Content Carousel

I have been searching for a responsive slide solution for two days with no luck, so I am reaching out for help. I am looking for a simple jQuery code for a slideshow that is lightweight and doesn't require a plugin. Here is the code for the slideshow: ...

javascriptjqueryhtmlslideshow

Retrieve information from MongoDB and display it in an HTML table

I have some data that follows this structure: { "jobname" : "2018_09_27_test123_0", "totalcalls" : 1836.0, "success" : 3.0, "fail" : 1833.0, "failureReasons" : [ { "reason" : "Unavailable", "count" : 53 ...

phphtmlarraysmongodbmongoose

Managing account activation errors in django: A step-by-step guide

Every time I attempt to click on an email activation link in order to activate a user account after submitting a registration form, I encounter an error message that says: The connection for this site is not secure; 127.0.0.1 sent an invalid response.. The ...

pythonhtmldjangoforms

AngularJS compatibility problem detected with IE Edge mode

I am facing an issue with my AngularJS Web application when it is deployed to a higher environment and accessed through IE Edge. The browser defaults to IE 8 mode, which does not support AngularJS, causing my application to not work as expected. To try an ...

angularjshtmlasp.net-mvc-4internet-explorercross-browser

How to Modify Button Backgrounds in Angular 8 after Click Events?

Within my Angular 8 Component, I have implemented a row of 4 buttons using the ant design (antd) library in HTML. My Objective: I aim to modify the background-color of a button when it is clicked. The previously clicked button should revert to its origin ...

htmlcssbuttonangular8background-color

none of the statements within the JavaScript function are being executed

Here is the code for a function called EVOLVE1: function EVOLVE1() { if(ATP >= evolveCost) { display('Your cell now has the ability to divide.'); display('Each new cell provides more ATP per respiration.'); ATP = ATP ...

javascripthtmlcssfunction

I'm looking for a button that, when clicked, will first verify the password. If the password is "abcd," it will display another submit button. If not, it

<form action="#" method="post" target="_blank"> <div id = "another sub"> </br> <input type = "password" size = "25px" id="pswd"> </br> </div> <button><a href="tabl ...

javascripthtml

Guide on retrieving data from a database and showcasing it on an HTML5 webpage using the combination of jqTouch and PhoneGap

I am currently working on developing an iPhone application for mobile health using a combination of HTML5, Javascript, jQTouch, and PhoneGap. This project is part of my school assignment aimed at gaining hands-on experience in building an iPhone app with t ...

jquerydatabasehtmlcordovajqtouch

CSS Toggle failing to show updated styles

Initially, I successfully changed the font and color of text on Google using a simple code. However, when I attempted to incorporate it into a toggle on / off switch, the changes did not take effect. To address this issue, I sought assistance from ChatGPT ...

javascriptcssgoogle-chrome-extensiontoggle

Employing a Button with PHP

Here is the code I've been working on: <html> <form action="employee.php"> Enter Employee SSN to Delete:<br> <input type="number" name="ssnDel"> <br> <br> <input type="submit" value="Submit"> </form> ...

phphtml

Having trouble with your Bootstrap 4 carousel?

I'm having trouble with my BS4 Carousel code. I followed this tutorial here to create it, but it's not functioning properly. The first image displays but the carousel isn't controllable and doesn't move to the next image. Does anyone kn ...

htmlcsscarouselbootstrap-4bootstrap-carousel

Obtain the numerical value of the vertical position of the mouse (

Currently, I am coding a JavaScript game and my objective is to designate a variable specifically for the Y axis of the mouse. I kindly request that the code be kept as simple and straightforward as possible, avoiding unnecessary complexity. That conclud ...

javascripthtmlvariablesyaxis

What is the best way to implement a hover effect that changes the opacity of images within a div?

I'm having trouble with changing the opacity of images on hover. For some reason, only the 6th picture changes opacity when I use the code: img:hover {opacity: 0.4;}. I've also attempted to target each image individually using "#prototype img[src ...

htmlcsshover

Is there a way to position a table to the left using bootstrap?

I've been struggling to align my table to the left side of my page using bootstrap with Flask. Despite numerous attempts, the tables remain centered and unaffected on the page as shown below. {% extends "base.html" %} {% block title %}Home{% ...

htmlcssbootstrap-4

Add the application's logo image to the Ionic header along with a side menu

When attempting to place the app logo image in the center or left of the Ionic header with vertical alignment, it seems to shift to the top instead. The code I am currently using to display the logo is causing some issues: <ion-view view-title="<im ...

htmlcssionic-frameworkcss-position

React - Issue with automatic resizing of divs

Currently, I am delving into the realm of ReactJS and have embarked on a small project to enhance my skills. My main goal is to create a resizable div element that can be adjusted by dragging it across the screen. Here is the snippet of code that I have be ...

htmlcssreactjsreact-hooksresize

Is there a way to prevent the virtual keyboard from covering up input fields on a webview?

I am currently dealing with an issue on my Genero web-app where the webview of an Angular app is not scrolling under an input when it gets the focus. This makes it difficult for users to see what they are typing. Interestingly, loading the page in a regula ...

androidhtmlangularvirtual-keyboardgenero

A static iframe or an alternative solution that is not interactive

I specialize in creating websites for my clients. When they log in, they are presented with 5 different design ideas for their site - each showcasing a unique layout and color scheme. Currently, I manually upload 5 screenshots of the designs created by me ...

phphtmliframeprintscreennon-interactive