This is similar to the 'icon appears as a square' question, however mine works when using 'fa fa-child' etc, but not when I use the image reference id.

In my layout I have:

```
 <link href="~/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="/css/my-css.min.css" rel="stylesheet" id="theme">

```

css:

```
.my-button {
    background: linear-gradient(45deg,#585858,#8C8C8C)
}

.my-button-blue:before {
    content: "\f500";
    font-family: FontAwesome;
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
}

```

Only using "\f500" in my css breaks it (it just shows a square), however using it in the code as below works fine: 

```
<i class="fas fa-smile fa-2x text-white"></i>

```

I have also tried @import"../vendor/fontawesome-free/css/all.min.css"; in my-css

I am tying to use it as part of my background image so that it 'crops' when reaching the edge - sort of like a watermark.

Fiddle:

<https://jsfiddle.net/as8L924e/2/>

Although this shows no icons...