CODEWITHSUNDEEP
htmlcsswebbutton
TTT
TTT

Reputation: 186

How can I move an icon in an HTML button separately from text?

I guess this might sound confusing, but I have a button on my website that has some text and an icon. Unfortunately I cannot seem to resize the icon without moving the text into a funky location. I am very new to web development so I apologize, I just am feeling a bit stuck. Does anyone know how I might be able to resize and relocate this icon within the button without having it affect my perfectly centered text.

My button HTML code:

    <div>
         <button id="add">
             <i class="fab fa-discord fa-fw" style="font-size: 30px;"></i>
             &nbspAdd to Discord
         </button></a>
        <button id="dashboard">Dashboard</button>
    </div>

My button CSS Code:

#add {
   font-family: Rubik, sans-serif;
   font-weight: 400;
   font-size: 1.2rem;
   color: #fefefe;

   background: -webkit-gradient(linear,left top,right top,from(#5779ff),to(#57a5ff));
   background: -webkit-linear-gradient(left,#5779ff,#57a5ff);
   background: -o-linear-gradient(left,#5779ff 0,#57a5ff 100%);
   background: linear-gradient(90deg,#5779ff,#57a5ff);
   border: 0;
   border-radius: 8px;
   margin-right: 1rem;
   height: 3.5rem;
   width: 12.5rem;
   cursor: pointer; 
}

Upvotes: 0

Views: 1312

Answers (2)

Jax-p
Jax-p

Reputation: 8551

You can position your icon with position:absolute and padding-left: X your button or you can use display:flex and align-items: center on button.

Position:absolute solution example:

#add {
  position: relative;
  padding-left: 2rem;
  font-family: Rubik, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #fefefe;
  background: linear-gradient(90deg,#5779ff,#57a5ff);
  border: 0;
  border-radius: 8px;
  margin-right: 1rem;
  height: 3.5rem;
  width: 12.5rem;
  cursor: pointer; 
}

#add .fab {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<button id="add">
     <i class="fab fa-discord fa-fw" style="font-size: 30px;"></i>
     &nbspAdd to Discord
 </button>

Flex solution example:

#add {
  display: flex;
  align-items: center;
  font-family: Rubik, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #fefefe;
  background: linear-gradient(90deg,#5779ff,#57a5ff);
  border: 0;
  border-radius: 8px;
  margin-right: 1rem;
  height: 3.5rem;
  width: 12.5rem;
  cursor: pointer; 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<button id="add">
     <i class="fab fa-discord fa-fw" style="font-size: 30px;"></i>
     &nbspAdd to Discord
 </button>

Upvotes: 1

Andreja Zivanovic
Andreja Zivanovic

Reputation: 99

#add
{
  display: flex;
  align-items: center;
}

Should do the trick

Upvotes: 0

Related Questions