Is it possible to add a badge with numbers like 5, 10, or 100 on top of the Font Awesome symbol (fa-envelope)? I am looking for something like this:
However, I am struggling to figure out how to place the badge on top of the symbol. You can see my attempt here: jsFiddle.
I want to make sure it is compatible with Twitter Bootstrap 2.3.2.
Here is a simple solution that requires no extra markup, just a new class and a pseudo element.
HTML
<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>
CSS
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
position: relative;
}
.badge:after{
content:"100";
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
Although @Paulie_D's response is solid, it may not be as effective when dealing with a container of variable width.
If you're looking for a better solution in that scenario, check out this: http://codepen.io/johnstuif/pen/pvLgYp
Here's the HTML:
<span class="fa-stack fa-5x has-badge" data-count="8,888,888">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</span>
And here's the CSS:
.fa-stack[data-count]:after{
position:absolute;
right:0%;
top:1%;
content: attr(data-count);
font-size:30%;
padding:.6em;
border-radius:999px;
line-height:.75em;
color: white;
background:rgba(255,0,0,.85);
text-align:center;
min-width:2em;
font-weight:bold;
}
Encase the fa-envelope icon and the number inside a div, with the wrapper div having a position:relative and the number being positioned absolutely within a span.
Feel free to explore this demo
The HTML structure is as follows:
<div class="icon-wrapper">
<i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
<span class="badge">100</span>
</div>
The accompanying CSS rules are outlined below:
.icon-wrapper{
position:relative;
float:left;
}
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
}
.badge{
background: rgba(0,0,0,0.5);
width: auto;
height: auto;
margin: 0;
border-radius: 50%;
position:absolute;
top:-13px;
right:-8px;
padding:5px;
}
I hope you find this solution beneficial.
This solution appears to be effective, with minimal additional code required.
.badge{
position: relative;
margin-left: 60%;
margin-top: -60%;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-1x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>By embedding the badge within the icon element, I was able to easily position it in relation to the boundaries of the icon container. The sizing of the badge was done using 'em' units, ensuring that its size is proportional to the icon's size. This allows for simple adjustments by modifying the font-size property within the '.badge' CSS class.
If you're utilizing the SVG + JS version of Font Awesome:
https://fontawesome.com/how-to-use/on-the-web/styling/layering
Layers provide a modern approach to positioning icons and text visually atop each other.
<span class="fa-layers fa-fw">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
According to the Font Awesome guidelines:
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
My hamburger menu is fully functional using CSS alone. However, when the menu opens, it doesn't fill the entire screen as I would like. Currently, my page content appears below the open menu, creating a cluttered look. https://i.sstatic.net/EtTsr.png ...
I have a cool CSS built hover-over drop-down menu that I want to add to my website. It works perfectly on all browsers except for IE9. Here is the code and stylesheet I am using: Check out the code and sheet here If anyone has any insights on what might ...
Within my Angular 4 project, I am utilizing ngClass on an object that contains a CSS class applied with unset: all within it. Despite knowing that ngClass adds its properties, the expected result was for all values to be unset and the style elements from n ...
Currently, I am using Bootstrap 3.3.7 and facing an issue with the alignment of smaller columns in relation to bigger columns. To see a demo, click here. I have set a margin of 10px between the columns. For example, the first row consists of the followin ...
Lately, the tag "webkit" has caught my eye on various questions. These inquiries typically pertain to web-related topics like CSS, jQuery, website layouts, and cross-browser compatibility problems... But what exactly is "webkit" and how does it interact w ...
Is it possible to center the last element when resizing the window to a smaller resolution, even though the parent's justify-content parameter is set to space-between? I understand that using center or space-around would achieve the desired result, bu ...
I am experiencing difficulties with embedding a video in my HTML file. I attempted to use a YouTube video, but when I open it in my browser, it displays an error message stating that the video is unavailable because YouTube has refused to connect. I also ...
I am working on creating a dashboard frame using Bootstrap 5, and I aim to achieve the functionality shown in these two images: Here is my current setup: <html> <body> <div class="pretoolbar">pretoolbar (non-essential inf ...
Can someone help me create a description for the select tag that won't show up in the drop-down options? I remember seeing this done somewhere, but I can't recall where. Any suggestions? This is what I am trying to achieve: <fieldset> ...
Looking for help to accomplish this task. I already have the styling, but I want something to happen when I click on the tabs. Specifically, I want the div with the tab class names to show and hide upon clicking the tabs. Currently, nothing happens when I ...
I'm dealing with a scenario where multiple divs share the same class. There is a dropdown that alters the background color of one of these divs when a certain option is selected (for example, option 2 changes div #2's background color). My dile ...
One of the challenges I encountered involved a vertically aligned card group containing a card with an image: https://i.stack.imgur.com/w9Jkf.jpg This is the React code snippet that was causing the issue: import React from 'react'; import { ...
As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...
I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary. So far, I attempted to align the text to the right by using this c ...
I am working with a simple layout design: +----------+ | Header | +----------+ | | | Content | | | +----------+ | Footer | +----------+ My goal is to ensure that the footer is positioned: at the bottom of the viewport when there ...
For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...
I'm trying to figure out if I can relocate this (image1) to (image2). I prefer not to utilize position:relative as it may disrupt my design in bootstrap. Image 1 (I don't want it here) Image 2 ( I want it here) Here is the relevant CSS code: ...
The issue with the spacing between horizontal and vertical list items is perplexing. Despite having identical margin, padding, height, and width, they seem to display differently. While manual adjustment of margins or paddings can resolve this, I am curiou ...
I've been experimenting with converting some divs using border radius and I've almost got it, but sometimes they end up looking like 'eggs' haha. Here is the CSS code I'm using: #div{ /*central div*/ position:absolute; t ...
I am encountering spacing issues with the markup provided below. <h2>Profitability Report</h2> <form method="post"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-toggle ...