How to change the font-awesome text font?

Question

I am using font-awesome in a button, however I also want to have text within the font awesome button. the Font family has to be fontawesome but that gives me some kind of serif font which I cannot modify.

Code I am using

    <div class="  btn-toolbar">
<div class="btn-group" title="vote">
<button class="btn icon-">
<span class="icon-thumbs-up"> vote <span class="icon-thumbs-down">
</button>
<button class="btn icon-heart" title="subscribe to get latest updates"></button>

</div>
  <div class="btn-group">
  <button class="btn icon-edit" title="edit"></button>
  <button class="btn icon-print" title="print"></button>

</div>
    <div class="btn-group">
  <button class="btn icon-facebook" title="share on facebook"></button>
  <button class="btn icon-twitter" title="share on twitter"></button>
  <button class="btn icon-google-plus" title="share on google+"></button>


</div>
</div>

Answer 1

You should not use icons directly on button, but instead add them to its content. Moreover you have very serious syntax errors. <span> is not self closing element, you need to do </span> every time you use it. Documentation suggests using <i></i> instead, but it violates the feelings of some developers. Anyway, let use it in this example (spans works too).

When you need a button with icon, you do:

<button class="btn" title="share on facebook"><i class="icon-facebook"></i></button>

When you need a text next to the icon, just simply append it (notice the space after icon).

<button class="btn"><i class="icon-thumbs-up"></i> Like</button>

You can use multiple icons as well.

<button class="btn"><i class="icon-thumbs-up"></i> Vote <i class="icon-thumbs-down"></i></button>

For more experiments, look at this fiddle: http://jsfiddle.net/Frizi/h69je/2/

Answer 2

Fixed - used the following code to overwrite

<span class="icon-thumbs-up"> <span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; font-size:12px;" >vote</span> <span class="icon-thumbs-down">

Answer 3

The following HTML and CSS worked for me to overwrite the font-awesome v5.0+

<i class="fas fa-phone"><span class="fa-icon-innter-text">&nbsp;TEXT</span></i>

.fa-icon-innter-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}