Decided to tackle this on my own, the solution is to approach it from a different angle.

• Avoid adjusting the vertical-align of the text
• Focus on adjusting the vertical align of the font-awesome icon

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Instead of using inline styles, consider targeting it with a custom CSS class. However, if you prefer a simple copy-paste solution, this method will do the trick.

Check out the technique here: Vertical alignment of text and icon in button

If it were up to me, I would opt out of using icon-2x and personally define the font-size as shown below

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

For a live example, visit JsFiddle

Incorporating icons alongside text is a practice I implement regularly, which is why I decided to implement a global change:

.fa-2x {
  vertical-align: middle;
}

You can also include 3x, 4x, and so on in the same definition when necessary.

If you're experiencing alignment issues, a quick fix could be adding line-height: inherit; in CSS to specific i.fa elements.

Alternatively, you could implement a global solution with higher specificity to override FontAwesome's .fa rule, which sets line-height: 1 without needing !important:

i.fa {
  line-height: inherit;
}

Be cautious that this global solution doesn't cause conflicts in other areas where FontAwesome icons are used.

Utilizing a flexbox option with Font Awesome 4.7 and earlier versions

Hosted URL for FA 4.x -

div {
  display: inline-flex;
  align-items: center;
  line-height: 40px;
  padding: 0px 10px;
  border: 1px solid #ccc;
}

/* Additional styling below, feel free to disregard */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    Hello World
</div>

Fiddle:

http://jsfiddle.net/Hastig/V7DLm/180/

Implementation of flex and Font Awesome 5

Hosted URL for FA 5.x -

div {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid #ccc;
}
.svg-inline--fa {
  padding-right: 10px;
}
.icon-camera .svg-inline--fa {
  font-size: 50px;
}
/* Additional styling below, feel free to disregard */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    Hello World
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    Hello World
</div>

Fiddle:

https://jsfiddle.net/3bpjvof2/

An easy method is to adjust the vertical-align css property to center

i.fa {
    vertical-align: center;
}

This method was very effective for me.

i.fa {
  line-height: 100%;
}

Make sure to assign your icon a height of 100%

There is no need to make any changes to the wrapper element (such as your button).

This method requires the use of Font Awesome 5. It may not work with older versions of FA.

.wrap svg {
    height: 100%;
}

Keep in mind that the icon is actually an svg graphic.

Demo

If you're working with Bootstrap 4, it's as easy as this:

<div class="centered"><i class="fas fa-camera"></i></div>

To adjust the line height of an icon, you can consider utilizing the percentage feature of the vertical-align attribute. Typically, 0% represents the bottom, and 100% represents the top, however, experimenting with negative values or percentages greater than 100 can yield unique design outcomes.

.my-icon i {
    vertical-align: 100%; // aligns to the top
    vertical-align: 50%; // aligns to the middle
    vertical-align: 0%; // aligns to the bottom
}

It's been quite some time since this question was first posed. In the rapidly evolving world of technology, browser compatibility has significantly improved. While using vertical-align is an option, it might not be the most scalable or reusable solution. For a more modern approach, I suggest utilizing flexbox.

Let's take the example provided by the original poster and reimagine it with flexbox. By styling a single element with flexbox, you can ensure that even if the size of the button changes, it will remain centered both vertically and horizontally.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Check out this example: JsFiddle

To ensure separate targeting, wrapping the text inside a element is recommended. By floating both the and elements to the left, you can use line-height to control the vertical spacing of the text. Setting the line-height to match the height of the container (30px) will vertically align it. Refer to this example.

Updated Markup:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Updated CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

Aligning font awesome icons vertically next to text can pose a challenge when utilizing a flexbox layout. Despite attempts with margins and padding, adjusting all items proved problematic. Various flex alignments such as center, start, and baseline didn't yield the desired result. Ultimately, the most effective and streamlined solution was to modify the placement of the icon by setting its containing div to position: relative; top: XX; This approach delivered the desired outcome flawlessly.

To easily center the icon element, just set the vertical-align property:

div .icon {
   vertical-align: center;
}

In my experience, changing the element to display grid and aligning its content is a simple and effective solution that works well.

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}