CODEWITHSUNDEEP
htmlcsssass
Daniel
Daniel

Reputation: 3272

Float icon inside button to the right

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

  1. I want the text in the button to be centrally aligned, so adding float: left to the text isn't an option
  2. 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:

What the button looks like 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:

Button on Firefox

Upvotes: 5

Views: 8371

Answers (4)

sdvnksv
sdvnksv

Reputation: 9668

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;
  }
}

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18565

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>

Upvotes: 0

Maeva Charbonnier
Maeva Charbonnier

Reputation: 44

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.

Upvotes: 0

stevenpslade
stevenpslade

Reputation: 360

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.

Upvotes: 3

Related Questions