How can I add a leading icon to my html button?

Question

I'm trying to make a linktree type of website with HTML. It's going fine but I'm not sure how to add an icon to the left of my button.

Here's what I have so far:

 .button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 12px; border-color: white; border-style: double; color: white; padding: 14px 28px; padding-left: 48px; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 18px; } button:hover { transform: scale(1.1); }

 <button class="button" onclick="function()">Twitter</button>

Answer 1

This can be super simple like this or more complicated - so NOT attractive but this is simply one alterative to "how" rather than "looking great" here.

 img { display: inline-block; background-color: pink; }.button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 0.75rem; border-color: white; border-style: double; color: white; padding: 1rem 2rem; padding-left: 4rem; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 1.25rem; }.button button { color: #ffffff; background-color: #3481b4; border: none; font-size: 1em; }.button button::before { content: url('blacktweet.png'); alt: "My Tweet:"; } @supports (content: "x" / "y") {.button button::before { content: "★" / "tweet Text:"; } } @supports not (content: "x" / "y") {.button button::before { content: "★"; alt: "tweet Text:"; } }.button:hover { transform: scale(1.1); }

 <button class="button" onclick="function()"><img src="some.png" alt="bird tweet button">Twitter</button> <div>Here we place a character "icon" on this:</div> <div class="button"> <button class="xxx">Twitter</button> </div>

Answer 2

Another helpful method is to use a library for Icons, such as Font Awesome or a similar kind, where you can use it as a font in CSS, and it will keep your code cleaner in case you have too many elements.

The following technique consists in leaving padding to your button and using ::before to insert the icon:

 .button { padding-left: 80px; }.button::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; content: "\f099"; width: 80px; height: 80px; }.button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 12px; border-color: white; border-style: double; color: white; padding: 14px 28px; padding-left: 48px; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 18px; } button:hover { transform: scale(1.1); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <button class="button" onclick="function()"> Twitter </button>

Answer 3

Add the icon just inside the button element.

<button class="button" onclick="function()"><i src="path or url of the icon"></i>Twitter</button>

The best place to get icons from is font awsome.

Answer 4

 .button { transition: all.2s ease-in-out; background-color: #3481b4; opacity: 0.8; border-radius: 12px; border-color: white; border-style: double; color: white; padding: 14px 28px; padding-left: 48px; text-align: center; text-decoration: none; display: inline-block; max-width: 85%; min-width: 80%; font-size: 18px; }

 <script src="https://use.fontawesome.com/f9acb8e72a.js"></script> <button class="button" onclick="function()"><i class="fa fa-twitter"></i> Twitter</button>

Answer 5

you can use position relative to set your icon in left of the button

<button class="button" onclick="function()"><i class="fa-brands fa-twitter"></i> Twitter</button>

CSS

 button{
      width:100px;
      padding:10px;
    }
    
    i{
      position:absolute;
      left:15px
    }