Enlarge the icon so that it is bigger than the text, but ensure that both the icon and

Can someone please help me figure out how to align the icon with the text on this button?

https://i.sstatic.net/Jtc3E.png

Here is the current code I have:

.btn {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 17px;
  background: #72a031;
  display: inline-block;
  padding: 0px 30px 0px 25px;
  text-decoration: none;
}

.btn:hover {
  background: #61872c;
  text-decoration: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<button class='btn'>
    <i style="font-size: 1.73em; position: relative;" class="fab fa-steam-symbol"></i> Log in with Steam
</button>

I know it's a bit messy, but any help would be greatly appreciated!

htmlcss

Answer №1

To ensure that all elements/content inside the button are vertically aligned, you can easily apply the CSS rule vertical-align: middle using the selector .btn *:

.btn {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 17px;
  background: #72a031;
  display: inline-block;
  padding: 0px 30px 0px 25px;
  text-decoration: none;
}

.btn * {
  vertical-align: middle;
}

.btn:hover {
  background: #61872c;
  text-decoration: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<button class='btn'>
  <i style="font-size: 1.73em; position: relative;" class="fab fa-steam-symbol"></i> Log in with Steam
</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring a form is required using ng-validate

A sample form structure is shown below: <div class="row" id="yesAuth"> <div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}"> < ...

javascriptjqueryhtmlangularjs

Is it possible to integrate a MySQL database with an HTML form?

My goal is to allow users to input a name that exists in the database. Upon selecting "Go", I want to display all results from the contact table that match the user's input. However, when I run the HTML code, the PHP script executes but returns "0 res ...

phphtmlmysql

Removing an Element According to Screen Size: A Step-by-Step Guide

Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...

javascriptjquerycsswebmedia-queries

The Nivo Slider is stealthily concealing my CSS Menu

Although this question has been previously asked, I am still unable to make it work with the solutions provided; The website in question is I have tried changing the z-index on all menu items to 99999, but they are still appearing below. <div id="sli ...

jqueryhtmlcssnivo-slider

The color of the background does not remain changed permanently

I'm having an issue where the background color changes when I click a button, but reverts back almost immediately to its original color. How can I ensure that the new color stays permanently? Here is a simple JavaScript function you can use: functio ...

javascripthtmlcss

Use PHP to open a text file and display its contents in a textarea

I have a textarea on my website and I'm trying to figure out how to populate it with the content of a text file. I followed a tutorial that guided me through writing some code, but when I implement it, I'm facing an issue where the words from the ...

phphtmltextfopenfread

Tips for changing the color of shapes when hovering over an image state

I have arranged three images in a column and applied column-count: 3; along with setting border-width for those images. Now I am curious about how to create the hover state for these images. Here is the HTML code snippet: <div class="wrap"> < ...

htmlcss

The functionality of the click event attached with the addEventListener is

I have a unique project where I am developing a user interface for a paper-rock-scissor game. To create the UI, I included four buttons: "Start game," "rock," "paper," and "scissor." Initially, I wrote separate code for each button, which worked perfectly ...

javascripthtmlcss

Flipped the dimensions of an image for better responsiveness

Trying to implement this particular design on a responsive website. Wondering if there's a way to establish an inverse resizing technique using jQuery / Javascript so that as the viewport shrinks, the text size increases. Attempted to use jQuery to a ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the proper way to connect an external Javascript file to an html document within a Play Framework project?

Below is the content of my scala.html file: @() <!DOCTYPE html> <html> <head> <title> Spin To Win </title> <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/styles.css")" ...

javascripthtmlscalaplayframework

Whenever the page is refreshed, the vertical menu bar with an accordion feature hides the sub

I have designed a vertical accordion menu bar following the example at http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol However, I am encountering an issue where clicking on a button to display a submenu causes the page to refr ...

javascriptc#jqueryhtmlasp.net

What is the best way to display the content below a bootstrap card while utilizing relative positioning?

Currently working on a bootstrap card design featuring an image. With the card body positioned above the image using position: absolute and top. The challenge arises when adding a new div below the card; it ends up being pushed onto the image instead of s ...

htmlcssbootstrap-4

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

I am facing an issue with integrating the bootstrap datetimepicker with Datatables to filter the data based on selected dates. The problem is that only an input bar is displayed on the page, and there is no calendar or calendar symbol visible. I suspect it ...

javascripthtmldatatablesbootstrap-datetimepicker

Are Bootstrap Input groups inconsistent?

Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...

javascripthtmlcsstwitter-bootstrap

JavaScript Bug Report

Currently, I am immersed in a project that encompasses various languages like HTML, JS, and PHP. While working on one of the PHP functions, I stumbled upon an unexpected anomaly. To dissect it better, I decided to break it down into simpler functions: &l ...

javascriptphphtml

What is the best way to incorporate a variety of colors into a single element?

Using a combination of colors in one element I'm looking for ways to incorporate multiple colors into a single element effectively. My initial attempt with the color mix function didn't work as expected, so I need new ideas and techniques on how ...

htmlcsslinear-gradients

What is the formula for determining the REAL innerWidth and innerHeight?

I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size. When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the cal ...

javascriptjqueryhtmlcsstwitter-bootstrap

URL to section of website without the navigation bar portion

I am trying to solve a problem with creating a link that will take me to a specific part of the page while taking into account the height of the navbar. The issue is that since the navbar is fixed to the top with a solid color, it ends up covering part of ...

htmlcsstwitter-bootstrap

Saving the output of an AngularJS expression in an input field

Looking at the calculations below, I am currently evaluating an expression, {{ annualIncome * 4.5 }}, in one input and then re-evaluating the same expression in another input. Instead of saving the result and transferring it to the other input, I am repeat ...

javascriptcssangularjs

Clicking a link will trigger a page refresh and the loading of a new div

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> $(window).load(function () { var divs = $( #add_new, #details"); $("li a").click(function () { ...

javascriptphpjqueryhtmlajax