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  onclick="function()">Twitter</button>

CodePudding user response：

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  onclick="function()"> Twitter </button>

CodePudding user response：

Add the icon just inside the button element.

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

The best place to get icons from is font awsome.

CodePudding user response：

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  onclick="function()"><img src="some.png" alt="bird tweet button">Twitter</button>

<div>Here we place a character "icon" on this:</div>
<div >
  <button >Twitter</button>
</div>

CodePudding user response：

.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  onclick="function()"><i ></i> Twitter</button>

CodePudding user response：

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

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

CSS

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