Tips for incorporating a glyphicon onto a bootstrap badge within an HTML document

Could someone help me with adding a glyphicon on top of a Bootstrap badge using CSS?

I am looking to position the glyphicon at the top corner of the badge, similar to the example below:

https://i.sstatic.net/skEhG.jpg

Please see the code snippet provided for reference:

<!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>
        <div class="container">
          <span class="badge">10</span>
           <span class="glyphicon glyphicon-time"></span>
           
        
        </div>
      </body>
    </html>

htmlcsstwitter-bootstrap

Answer №1

If you want to experiment with some CSS, give this code a go.

It's been effective for me personally.

.badge > .glyphicon {
  position: absolute;
  top: -15px;
  background: red;
  padding: 5px;
  border-radius:50%;
}
.badge {
  margin-top: 15px;
  position: relative;
}

Answer №2

Check out this code snippet

.badge {
  margin-top: 20px;
  position: relative;
}
.badge > .glyphicon {
  position: absolute;
  top: -10px;
  background: red;
  padding: 5px;
  border-radius:50%;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <span class="badge">10 <span class="glyphicon glyphicon-time"></span></span>


  </div>
</body>

</html>

Answer №3

Check out the code snippet below:

.group .glyphicon.glyphicon-time {
                left: 33px;
                position: absolute;
                top: 4px;
            }
            .group .badge {
                margin-top: 10px;
               position: relative;
            }
            .group{ }
<!DOCTYPE html>
                <html>
                  <head>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                  </head>
                  <body>
                    <div class="container">
                      <div class="group">
                      <span class="badge">10</span>
                       <span class="glyphicon glyphicon-time"></span>
                       </div>

                    </div>
                  </body>
                </html>

Answer №4

give this code a try and see how the output appears like this https://i.sstatic.net/jj6Ln.png

<html><head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">

        <div class="badge-container" style="
    display: inline-block;
    position: relative;
    margin: 20px 0;
">
            <span class="badge">10</span>
            <span class="glyphicon glyphicon-time" style="
    position: absolute;
    right: -4px;
    top: -5px;
"></span>
        </div>


    </div>

</body></html>

Answer №5

Here is a suggestion for your code:

.glyphicon{
     top: 24px !important;
    font-size: 31px;

}
.badge {
margin-left: -10px;
background-color: #E91E63 !important;
}
<html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
      </head>
      <body>
        <div class="container">
         
           <span class="glyphicon glyphicon-time"></span>
           <span class="badge">10</span>

        </div>
      </body>
    </html>

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

Enhancing the aesthetic appeal of a form

I have created a form in HTML that utilizes JavaScript to pull data from a database. I am looking to style the form, but I'm unsure of how to proceed. Below is the form along with some CSS code. How can I integrate the two together? <form id=" ...

javascripthtmlcss

Enhancing the Appearance in Internet Explorer 7

Recently, I decided to check my client's new website on my BrowserStack account. I'm not very experienced in developing for older browsers, but I wanted to make sure the website was at least viewable on them. I tested it on Windows XP with IE 7. ...

cssinternet-explorer

What is the process for adding a 3D object to a webpage and making it interactive with movement?

Hello, I am new to web development and apologize for my limited English skills. I have a specific challenge that I need help with: How can I create a 3D plane on a web page using HTML5 and make it interactive, such as flying or moving within a designated ...

javascripthtmlthree.jsblender

Using Bootstrap to create a fixed footer in Laravel

I have a Laravel project with Bootstrap added as the CSS. I have tried everything to make my sticky footer work, but when the page is longer than the window, it remains at the bottom of the window when scrolled up. Here is my main: <html> <head& ...

cssbootstrap-4

Using HTML5 to create a structured outline with numbered headings at multiple levels

Currently, I am in the process of creating an HTML5 manual that will require numbering for various elements. The main headings should be numbered like "Section 4: Some Stuff" Subheadings will also need numbers such as "4.01: the first point you need to kn ...

htmlcssoutliner

One web page featuring various query_posts

I'm in the process of developing a new template page for a WordPress theme that will feature 5 distinct "modules" embedded within the page's content section. These modules are designed to display the latest 4 posts from different categories, simi ...

phphtmlwordpressloops

Popup modal is obstructed by carousel indicator

I'm having trouble with the following issue: The 3 dots represent my carousel indicator. My problem is that the carousel indicator is blocking my pop-up modal image. I've tried adjusting the z-index of the modal without success. Here is the code ...

javascripthtmlcssangularjs

Ensuring that your content expands to fit the sidebar dimensions

I have diligently searched for a solution to my issue both on Google and here, but have yet to find one that works. I've experimented with various CSS properties like display: table-cell and inline-block, as well as different overflow options, but not ...

css

Aligning an SVG icon at the center of a button

I have elements that are currently being used as buttons, but I want to switch them out for actual button tags. This would improve accessibility and allow keyboard navigation using the tab key to focus on my buttons. Each button contains a centered SVG ima ...

htmlcsssvgbutton

What are some methods for identifying a single attribute element that is duplicated elsewhere on a webpage?

<html> <tr id="userman-orgchart-tree-node-9" class="fancytree-expanded fancytree-folder fancytree-has-children fancytree-exp-e fancytree-ico-ef"> <td> <span class="fancytree-node" style="padding-left: 16px;"> <span class="fancytr ...

htmlcssxpathselenium-webdriverselenium-ide

Angular 2's SVG creations do not resize properly

It is a common knowledge that an svg element with the attribute viewbox should automatically scale to fit the sizes specified in the styles. For instance, let's consider a 200*200 circle placed inside a 100*100 div. Prior to that, we need to ensure t ...

csssvgangular

Enhance the appearance of the web page in your Windows Phone by incorporating CSS into the WebBrowser

Is it feasible to include a "position:fixed" style to the <header> in the app that showcases website pages using a WebBrowser control? This adjustment can be made via inline styling or by utilizing an external stylesheet saved within the resources ...

csswindows-phone-8browserwindows-phone

Are there CSS styles that target specific elements?

My goal is to design a unique and custom theme for blender.stackexchange. However, I am facing an issue where the rules I implement only affect certain tags when viewed in FF 29.0.1 Despite all tag elements having the same classes, parent elements, etc., ...

cssstylish

Top method for establishing multiple aliases for disabled elements in CSS

Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality? Code within file.css .overall-example input[type=checkbox]:checked + label { ...

css

Creating a receipt program in Python and protecting previous data from being overwritten

I am currently learning Python and attempting to create a program that generates an invoice listing all items, along with their prices and quantities. Each item should be displayed on a separate line. While I have managed to print each item in a line, I a ...

pythoncsspython-3.xwhile-loop

Access the original source code using jQuery

Is there a way to retrieve the raw HTML code (as seen in Chrome's source code window) using JQuery without having quotes converted to &quot or HTML symbols converted to text? I have tried using html() and text(), but neither method seemed to give ...

javascriptjqueryhtml

Unable to apply custom border color to Material UI Select component in React

I have been experimenting with material-ui v5 to improve my skills. I am currently struggling to customize the default style of the mui Select component. My goal is to modify the color of the Select element when it is being hovered over or in a focused sta ...

javascriptcssreactjsmaterial-ui

Leverage various responsive designs within Bootstrap 4 for optimal layout flexibility

When utilizing Bootstrap 3, we are able to write <div class="row"> <div class="col-lg-6 col-md-6 col-xs-12"> </div> <div> However, how can we achieve the same result in Bootstrap 4? I attempted using <div class="col-6 col-12"& ...

csstwitter-bootstrapbootstrap-4responsive-design

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

javascripthtmlcss

The transition effect is not functioning properly in CSS and React.js

.cartBtn { appearance: none; outline: none; border: none; cursor: pointer; text-align: center; background-color: transparent; color: inherit; } .cartBtn:hover { color: black; } .cart { display: none; opacity: 0; transition: all 4s ea ...

cssreactjshovercss-transitionsdisplay