I am using a glyphicon in a badge, and I would like to have the glyphicon have a smaller font-size than the text. This works fine, but now the glyphicon is not centered vertically in the badge.
When I try and give it a margin-bottom or padding-bottom it goes and adds this to the entire badge, and not just the glyphicon element.
Here is the .css class I'm using:
.glyphicon-test3 {
margin-right: 5px;
font-size: 6px;
padding-bottom: 8px;
}
Here is the HTML:
<div>
<span id="test" class="badge">
<span class="glyphicon glyphicon-plus-sign glyphicon-test3"></span>
Small icon with padding
</span>
</div>
I've made a PLNKR which shows the effect in it's full glory: http://plnkr.co/edit/VBIeaffmFujY2qcdPcVI
Any ideas?
Just add top:-1px and overwrite the existing top: 1px to .glyphicon selector
.glyphicon {
position: relative;
top: 1px; <<<This causing the problem
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
}
So
.glyphicon-test3 {
margin-right: 5px;
font-size: 6px;
line-height: 2;
top: -1px; <<<Here
}
Note: I remove the padding and add height
Fiddle
Part of your problem is the "top: 1px" that the glyphicon class specifies. It's a little better if you override that as well (to 0, or even better at -1). You may also want to play around with the line-height (also 1 as it stands).
in my css, this worked for me. GL
.glyphicons::before {
padding: 0px;
}
Related
How can I make the dont overlap each other on the thumbnail image?
Supposedly the span stay on their on their own image like this
Here is my CSS
.date-img {
text-transform: uppercase;
font-weight: bolder;
color: #054a8f;
position: absolute;
z-index: 2;
left: 5px;
top: 90px;
line-height: 1;
font-size: 25px;
margin-top: 5px;
}
Here is my HTML code
<li class="clearfix span12">
<span class="date-img"> 19 <br>Oct</span>
<div class="rsepro-image">
<div class="overlay-calendar-img">
<img src="https://event-mbpp.aidan.work/components/com_rseventspro/assets/images/events/thumbs/100/450a0c399c52f59dfc867bf413a6951d.jpg" alt="Program City Walk" width="70">
</div>
</div>
<a target="_blank" href="/index.php/ms/component/rseventspro/event/1-program-city-walk?Itemid=101">Program City Walk</a> <br>
<small>Wednesday, October 10, 12:00 AM - 12:00 AM</small>
</li>
You can also refer here - https://event-mbpp.aidan.work/
i have gone through link
just change css class as,
.date-img {
text-transform: uppercase;
font-weight: bolder;
color: #054a8f;
position: relative;
z-index: 2;
left: -117px;
top: 25px;
line-height: 1;
font-size: 25px;
margin-top: 5px;
}
You are using position: absolute, which makes them overlap, as they are absolutely positioned. Right now, any siblings will be overlapped.
But absolute refers either to the page, or to the closest parent item that has a position rule applied.
So a quick and dirty fix will be setting your list items' position to relative: this will make the subsequent absolute rule refer to their container (you may have to adjust the offsets though):
.rsepro_upcoming li {
position:relative;
}
Note that the position:relative is the default for lists so it shouldn't have other side effects.
A better approach would be using flex.
I'm positioning an icon inside a button. To align the icon to the right of the button, I'm using float: right on the icon. But as you'll see, this causes the icon to overflow on Firefox, so I need another solution.
Things to note
I want the text in the button to be centrally aligned, so adding float: left to the text isn't an option
The icon needs to be floated to the right of the button
Here's the Sass for the icon and button:
.icon-icomoon
font-family: 'icomoon' !important
speak: none
font-style: normal
font-weight: normal
font-variant: normal
text-transform: none
line-height: 1
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.icon-arrow-right:before
content: "\e910"
.btn
border-radius: 0
padding: 20px 40px
font-weight: 600
font-family: $fontSansSerif
font-size: 1.9em
span.icon-arrow-right
float: right
font-size: 40px
.mobile-and-tablet-only
display: none
#media screen and (max-width: $mediaBreakpointTablet)
display: block
.desktop-only
display: none
#media screen and (min-width: $mediaBreakpointTablet+1)
display: block
Here's the HTML for the button:
<a href="#" class="btn btn-success">
<span class="desktop-only">
Let's make something awesome together
<span class="icon-icomoon icon-arrow-right"></span>
</span>
<span class="mobile-and-tablet-only">
Let's work together
<span class="icon-icomoon icon-arrow-right"></span>
</span>
</a>
Here's what it looks like in the browser on Chrome:
And here's what it looks like on Firefox. As you can see, the width of the text is at 100% which is causing the icon to overflow:
Try giving the a.btn position:relative and then positioning the span.icon-arrow-right absolutely (position: absolute). Then you can give the arrow icon any desired position by adding right: 3%; top: 33% to it.
you can use :after on your span
btn {
position:relative;
}
span{
text-align:center;
}
span:after {
content: url(myicon.png);
}
As this way, you didn't need this
<span class="icon-icomoon icon-arrow-right"></span>
example
example 2
OR you can use display: inline-block by giving them width in %. Also you can use display:flex.
Like this.
span{
font-size:16px
}
img{
vertical-align:-15%;
}
<button>
<span>My Text</span>
<img src="https://rack.pub/media/bitcoin.png" height="16px" >
</button>
You can try to make the spans inside the button inline blocks (to prevent spanning 100% of the button width). Also don't forget to use clearfix to the parent container (.btn) of the floated span.
.btn {
text-align: center;
#include clearfix();
> span {
display: inline-block;
&.icon-icomoon {
float: right;
}
}
}
#mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
I have a simple input-group which contains a input-field and button.
The strange thing is, it doesn't show up. The color isn't the same as background-color, checked in inspect element.
I've created a JSfiddle, but that doesn't do anything, cause it shows perfectly there...
https://jsfiddle.net/u691aw17/
Maybe you guys have an idea?
<!-- language: lang-css -->
/* CSS */
div.input-group {
width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
input[type="text"]{
width:300px;
height:50px;
font-size: 14px;
}
input[type="text"]::-webkit-input-placeholder{
text-transform: uppercase;
font-size: 14px;
}
input[type="text"]:-moz-placeholder /* Firefox 18- */
{
text-transform: uppercase;
font-size: 14px;
}
input[type="text"]::-moz-placeholder /* Firefox 19+ */
{
text-transform: uppercase;
font-size: 14px;
}
input[type="text"]:-ms-input-placeholder{
text-transform: uppercase;
font-size: 14px;
}
span.input-group-btn button.btn {
width:150px;
height:50px;
line-height: 1em;
padding: 0px;
}
}
.btn {
background-color: green;
color:#ffffff;
}
<!-- language: lang-html -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Email">
<span class="input-group-btn">
<button class="btn" type="button" >Sign up</button>
</span>
</div>
<!-- end snippet -->
Clearly it is a problem with the rest of the styles because in Fiddle works perfectly.
I'm guessing maybe the font-size: inherit is the problem (it's inheriting font size 0 from its parent). Set a font size to the button to override that rule.
Select button text not showing due to its padding. You can set height:auto to show the text of select button. Or set padding of select button to 0 (Zero) to see the text not appearing.
I think it might be working in your fiddle because there's no Bootstrap CSS. You're trying to override the Bootstrap .btn class CSS, but with Bootstrap you often have to be more specific (as in specificity) than that. Add an id to the button and use that as your CSS selector.
I have a div which contains some text and a button.
When I click on the button, it disappears based on a criteria which is controlled by an ng-if, but this causes the text to move up a couple of px!
I can't seem to make it stay in the same spot. Any ideas?
Here is what the HTML looks like:
<div class="review-helpful">
<span ng-if="showThis">Howdy there partner!</span>
<span ng-if="!showThis">How they hanging?</span>
<button ng-if="showThis" type="button" class="btn btn-default btn-helpful" ng-click="setShowThis(false)">Yes</button>
</div>
And here is the CSS:
.review-helpful {
margin-top: 5px;
min-height: 23px;
font-size: 12px;
color: #696969;
}
.btn-helpful {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
font-size: 12px;
}
I've hooked up a plnkr to show the exact problem: http://plnkr.co/edit/9FqzhB3NJXHHnHtdfVvB
The height of the button is greater than the height of the text in the span.
There are probably a million ways to solve it. One way is using the line-height style:
.review-helpful {
margin-top: 5px;
min-height: 23px;
font-size: 12px;
color: #696969;
line-height: 24px;
}
I am trying to vertically align font icons. I have tried vertical-align: middle but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.
div {
font-size: 50px;
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
background: yellow;
}
.cart {
margin-top: 20px;
}
.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;
vertical-align: middle;
text-transform: none;
}
<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<div>
<span class="icon icon-shopping-cart"></span> Shopping Cart
</div>
<div class="cart">
Shopping Cart
</div>
You can try vertical-align: text-bottom or vertical-align: text-top, depending on which one you feel is more vertically centered.
For your shopping cart icon, it seems text-top is most vertically centered.
Example at: https://jsfiddle.net/p3g189bg/
Another nowadays example via Flexbox.
span {
font-family: helvetica, arial, sans-serif;
display: inline-flex;
align-items: center;
padding: 0 1rem;
font-size: 3rem;
line-height: 4rem;
border: 1px solid #ffb0d1;
}
/* target all Font Awesome 5 <svg> tags */
.svg-inline--fa {
padding-right: 1.5rem;
}
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
<span>
<i class="fas fa-shopping-cart"></i>
Shopping Cart
</span>
Try using line-height attribute
You can set it to 0.5,1,1.5 etc
You can try for vertical-align:middle;
or line-height:1;
or using padding property you can set icon position
example using vertical:middle; property js fiddle: http://jsfiddle.net/vrcarwrj/
Alternatively to the above, using the span element method you describe, you could relatively position the span tag, relative to its parent div element.
Like:
div{
position: relative;
}
span.icon-shopping-cart{
position: relative;
top: 5px;
}
You can try using valign: middle
and/or then setting the line-height to 1px, 1.5px, etc.