FontAwesome isn't a font family?

I know questions like this have been asked and I've looked at them but I cannot get it. I just see gray squares.

I'm saving as utf-8. I'm using CSS. I can already change the color of the h3 class="label-text" but the font awesome doesn't appear.

If I use a font awesome CDN it works but I don't want a font awesome CDN. I want it completely embedded. my links are stacked as such:

 <link rel="stylesheet" href="content/bootstrap.min.css">
 <link rel="stylesheet" href="content/font-awesome.min.css">
 <link rel="stylesheet" href="content/forms-style.css">

---

input[type=radio]{
        display: none;
}

input[type=radio] + .label-text:before{
        font-family: FontAwesome;
        content: "\f111";
        color: #cccccc;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        width: 1em;
        display: inline-block;
        margin-right: 5px;
}

input[type=radio]:checked + .label-text:before{
        content: "\f192";
        color: #990000;
        font-family: FontAwesome;
}

<div class="gender">
                                <h2>Gender</h2>
                                <label id="male" class="radio-list">
                                        <input type="radio" name="check"/>
                                        <h3 class="label-text">Male</h3>
                                </label>
                                <label id="female" class="radio-list">
                                        <input type="radio" name="check"/>
                                        <h3 class="label-text">Female</h3>
                                </label>
                        </div>