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

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

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 2

.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 3

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
}

Answer 4

Add the icon just inside the button element.
<button class="button" onclick="function()"><img src="path or url of the icon"></img>Twitter</button>
But The best way to do it is to use the fontawsome library here it is super easy to use and provide a lot of commercial icons.

Answer 5

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.
I added a third example to more closely match the updated OP question with the image on the left and wrapped some style around things.
Created to twitter for the svg image: https://about.twitter.com/en/who-we-are/brand-toolkit
.content-container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
row-gap: 1rem;
}
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);
}
.modern-container {
display: flex;
flex-direction: column;
row-gap: 1rem;
border: solid 1px #22ff22;
padding-left: 1.5rem;
}
.modern-container>div:first-child {
border-bottom: 2px solid #2222ff;
padding: 0.25rem;
}
.modern-button-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0.5rem;
}
.modern-button-container:hover {
transform: scale(1.1);
}
.modern-button-container {
/* just styling */
transition: all .2s ease-in-out;
background-color: #3481b4;
opacity: 0.8;
border-radius: 0.75rem;
border-color: white;
border-style: double;
color: white;
text-decoration: none;
max-width: 85%;
min-width: 80%;
font-size: 1.25rem;
}
.modern-button-container:last-child: {
margin-left: auto;
}
.flex-button-img {
margin-left: 0.5rem;
height: 1em;
width: 1em;
}
.flex-button {
display: flex;
align-items: center;
color: #ffffff;
}
.flex-button button {
color: #ffffff;
background-color: #3481b4;
border: none;
font-size: 1em;
}
<div class="content-container">
<div>
<button class="button" onclick="function()"><img src="some.png" alt="bird tweet button">Twitter</button>
</div>
<div>
<div>Here we place a character "icon" on this:</div>
<div class="button">
<button class="xxx">Twitter</button>
</div>
</div>
<div class="modern-container">
<div>Here we have an image icon but using some grid and flex css</div>
<div class="modern-button-container">
<div class="flex-button-img">
<svg version="1.1" id="White" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M400,400H0V0h400V400z M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6
c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4
c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6
c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3
c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22
c-4.1,0-8.2-0.2-12.2-0.7C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>
</div>
<div class="flex-button">
<button class="tweet-btn">Twitter!</button>
</div>
<div></div>
</div>
</div>
</div>