How to Display the button and fontawesome icon in same line

<br>

.add-cart-button
{
    width:205px;
    height:56px;
    border-radius: 28px;
    background-color: #EC7F4A;
    color: #ffff;
    font-family: Roboto;
}
.add-cart-button-icon
{
    color: #232323;
    float: right;
    font-size: 40px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <button  class="add-cart-button">
    <span>Add to Cart</span><i class="fa fa-plus-circle fa-6  add-cart-button-icon" aria-hidden="true"></i>
   </button>


I'm using Bootstrap4 doubt in button that i need to display button along with fontawosome icon.can any one please tell me to do it.

Expected image

Actual output i got now

Image of Actual output i got now

Learn HTML5 and CSS3 From Scratch

Learn HTML5 and CSS3 From Scratch

HTML and CSS are essential skills to have for a career in web development. In this video we will cover both languages from the scratch and by the end of the course you will be creating your own projects.

HTML is a markup language that is used developing web pages. CSS is a language responsible for layout and styling of the web pages. 


Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Read Also

The Web Developer Bootcamp

Build Responsive Real World Websites with HTML5 and CSS3

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Web Design for Beginners: Real World Coding in HTML & CSS

HTML5 & CSS3 tutorial: From Beginner to Expert

HTML5 and CSS3 From Scratch with VS-CODE

How to build Desktop Apps with HTML, CSS and Javascript ?

Learn HTML & CSS From Scratch! The Beginners Guide

Learn HTML 5 Programming From Scratch - HTML 5 Tutorial for Beginners