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;
}
}
Related
I have the following code. It's a simplified code of a responsive design: In a certain screen size I want to show only the icon (blue - via ::before) but not the text.
When I try to hide the mail address via font-size: 0 (there will be an icon in the ::before) - the header grows in height.
Sure I could use max-height - but is there a cleaner solution?
Fiddle: https://jsfiddle.net/xs2wre4r/
<div class="header">
<span class="store-contact-email">
info#example.com
</span>
</div>
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com">info#example.com</a>
</span>
</div>
Left .header frame is computed = 25px
Right .header frame is computed = 30px
.header {
float: left;
}
.header .store-contact-email a:before {
line-height: 18px;
vertical-align: -36%;
padding-right: 5px;
background-color: blue;
width: 30px;
display: inline-block;
}
.header .store-contact-email a:before {
content: "x";
}
.store-contact-email {
border: 1px solid red;
}
.store-contact-email a {
font-size: 18px;
}
.store-contact-email a.hide {
font-size: 0px;
}
The problem is with the font sizes of the ::before blocks.
Since the second one has a font size of 0 and a line height of 18, it will be vertically positioned around the baseline, with 9px above and 9px below. The first one (with the normal font size) will be positioned normally (depending on the exact font), with, say, 14px above and 4px below.
(You also have vertical-align on the ::before, but that doesn't change the situation; it moves both ::before blocks 6.48 pixels down.)
So since the second one is located 5px lower than the first one, the bottom of the bounding box will be pushed down by 5px.
To illustrate,
span {
font-size: 18px;
border: 1px solid red;
background: rgba(255, 255, 0, .4);
}
span::before {
line-height: 18px;
vertical-align: -36%;
border: 1px solid blue;
background: rgba(0, 255, 255, .4);
width: 30px;
display: inline-block;
content: "x";
}
span.hide {
font-size: 0;
}
<span>visible</span>
<span class="hide">invisible</span>
Solution: don't use the font-size:0 trick.
You can set font-size of ::before, as it's inheriting parent font-size.
.header .store-contact-email a:before {
content: "x";
font-size: 18px;
}
Or you can use display or visibility, just avoid :before to inherit that property.
wrap the text with span and hide the span
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com"><span>info#example.com</span></a>
</span>
</div>
.store-contact-email a.hide span {
display:none;
}
Better to:-
(1) nest the text info#example.com inside another span, which will display:none under a breakpoint; or
(2) put the icon on .store-contact-email:before instead of .store-contact-email a:before.
The reason is that browsers often enforce a minimum font size for accessibility purposes.
I have several hundreds of icons around a legacy application:
<img class="date-picker" src="/image/datepicker.png">
Following CSS removes the datepicker.png but the font awesome icon is not displayed
.date-picker {
background-image: none;
}
.date-picker:after{
font-family: FontAwesome;
content: "\f073";
color:grey;
font-size:25px;
}
Is there a way how to achieve this without changing the IMG tags?
Pseudo-elements only get applied to images whose src attributes fail to load. If the image successfully loads, the pseudo-element will not be used.
One thing you can do is apply this to the parent element, but this obviously depends on your markup:
div {
height: 100px;
width: 100px;
position: relative;
}
div img {
display: none;
}
div::after {
content: 'foo';
position: absolute;
top: 0;
}
<div>
<img src="http://placehold.it/100x100" />
</div>
Here we hide the img element and apply the pseudo-element to the div container, then absolutely-position the pseudo-element to sit inside (well, on top of) the div.
You could wrap the image in a span and use the same class(es).
img.date-picker {
display: none;
}
span.date-picker:after {
font-family: FontAwesome;
content: "\f073";
color: grey;
font-size: 25px;
display: inline-block;
margin: 1em;
/* demo only */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<span class="date-picker"><img class="date-picker" src="/image/datepicker.png"></span>
Using jquery you can find all the img tag and wrap the img in a figure tag and apply the icon class to that.
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;
}
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.
I have the following (excerpted) html:
<span id="version">Version 1 <small>Last modified 04/August/2012</small><br>unfinished</span>
and the following (excerpted) css:
#version {
font-size: xx-large;
color: Black;
text-align: left;
margin-left: 35px;
}
#version small {
font-size: 50%;
}
Everything displays correctly until after the <br>, where the text isn't adjusted for the margin. Why isn't it adjusted after the <br>?
Because the span is an inline element. Do accomplish what you want, either set the display property on the span to block or inline-block, or change the span to a div.
jsFiddle example