Rotate the icon inside the button to the right
I am placing an icon inside a button. To align the icon to the right of the button, I use the icon float: right
in the icon. But as you will see, this leads to an icon overflow in Firefox, so I need a different solution.
Notes
- I want the text in the button to be centered, so adding
float: left
to the text is not a parameter - The icon should be placed to the right of the button
Here's 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 HTML
for the button:
<a href="#" class="btn btn-success">
<span class="desktop-only">
Let make something awesome together
<span class="icon-icomoon icon-arrow-right"></span>
</span>
<span class="mobile-and-tablet-only">
Let work together
<span class="icon-icomoon icon-arrow-right"></span>
</span>
</a>
This is how it looks in a browser in Chrome:
And this is how it looks on Firefox. As you can see, the text width is 100%, which causes the icon to overflow:
source to share
You can try to make slits inside inline button blocks (so as not to overlap 100% of the buttons width) Also, don't forget to use clearfix on the parent container ( .btn
) of the floating range.
.btn {
text-align: center;
@include clearfix();
> span {
display: inline-block;
&.icon-icomoon {
float: right;
}
}
}
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
source to share
you can use :after
for your range
btn {
position:relative;
}
span{
text-align:center;
}
span:after {
content: url(myicon.png);
}
This way you didn't need it
<span class="icon-icomoon icon-arrow-right"></span>
OR you can use display: inline-block by giving them% width. Also you can use display: flex .
source to share
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>
source to share