Прекрасный шрифт с wp_nav_menu

Я пытаюсь взять этот код с HTML-сайта и вставить его в мою тему через wp_nav_menu функция:

<div class="bottom">
<!-- Social Icons -->
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
</ul>

До сих пор письменный текст отображается в нужном месте, но я не могу заставить классы отображать реальный значок вместо текста. Я хотел бы, чтобы это выглядело точно так же, как код, который вставлен выше. Вот текущая функция, которую я использую.

<div class="bottom">
<?php if ( has_nav_menu( 'social-media' ) ) {

wp_nav_menu(
array(
'theme_location'  => 'social-media',
'container'       => 'false',
'container_id'    => '',
'container_class' => '',
'menu_class'      => 'icons',
'depth'           => 1,
'fallback_cb'     => '',
)
);
}
?>
</div>

Я очень ценю любую помощь, которую вы можете оказать.