I have a menu, I want to insert fontawsome icons in the menu. I have following code

**HTML**

```
<div>
    <a href="#" ><span class="fa fa-home">Home</span></a>
</div>

```

**CSS**

```
 div a {
  font-size:50px;
  display:block;
  color:white;
  font-weight:bold;
  text-decoration:none;
  background-color:green;
  font-family:'Segoe UI';
}

```

I want menu items to appear as block so that user can click on icons to open link, To achieve that I have to insert icon inside `<a>` tag. But after doing so I am unable to change font-family. I can change size and color but can't change family. I have tried many solutions but nonthing happened.
Is there anyway to change font-family? 

[JS Fiddle](https://jsfiddle.net/s96tz63b/3/)