How to use glyphicons

You see, I want to use the glyphicons icons in my project. For this, I have this code:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

<?php
    $tipos=App\Tipo::all();
?>

<li style="width: 205px; position: relative; left: 130px;" class="nav-item dropdown btn-secondary">
    <a id="navbarDropdown"
        class="nav-link dropdown-toggle"
        href="#" role="button"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        style="color:white;" 
    ><span class="glyphicon glyphicon-filter"></span>&nbsp;&nbsp;Artículos {{$mensaje}}<span class="caret"></span>
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        @foreach($tipos as $tipo)
            <a class="dropdown-item" href="{{ url('/articulo_filtrar/'.$tipo->id) }}">Filtrar por {{$tipo->nombre}}</a>
        @endforeach
        <a class="dropdown-item" href="{{ url('/') }}">Ver todas las noticias</a>
    </div>
</li>
<br>

What I have in the <link> of the beginning enables the use of these icons, but I have a problem: This is how the page looks if I do not put it:

And so if I put it:

Some letters get smaller by including this tag! How do I avoid this? As I use bootstrap 4, it seems that I no longer have access to glyphicon. How do I enable it without needing to go back to version 3 of bootstrap, as I am doing? I've also tried this so you can see the image:

<img src=&#xe138;>

But the image can not be seen.