Font Awesome icons

[mhulse]

Using Font Awesome 5:

/* <a class="ap_button-help" href="#"></a> */
.ap_button-help {
    height: 3rem;
    line-height: 3rem;
    float: right;
    text-align: center;
    width: 3rem;
}
.ap_button-help,
.ap_button-help:visited,
.ap_button-help:visited:hover,
.ap_button-help:focus,
.ap_button-help:focus:hover,
.ap_button-help:hover,
.ap_button-help:active {
    color: #fff;
    background: #3ba9cf;
    text-decoration: none;
}
/* https://fontawesome.com/how-to-use/web-fonts-with-css */
.ap_button-help::before {
    -webkit-font-smoothing: antialiased;
    content: "\f128";
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 0;
    position: relative;
    text-decoration: inherit;
    text-rendering: auto;
}

Using Font Awesome 4:

a::before {
    font-family: FontAwesome;
    line-height: 0;
    position: relative;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    /*display: inline-block;*/
    content: "\f177\00a0";
}

Using custom attribute:

/* http://css-tricks.com/examples/IconFont/ */
[data-icon]:before {
    font-family: FontAwesome;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    content: attr(data-icon);
    speak: none;
}