Prueba así:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
<div class="row">
<div class="col-md-6 col-sm-12 d-flex">
<div class="ms-3 p-2 bg-primary text-light">
<i class="fa fa-solid fa-briefcase" style="padding-top:3px"></i>
</div>
<div class="bg-danger p-2">EXPERIENCIA</div>
</div>
</div>
Estás cargado al elemento <i>
de muchas clases lo cual no es recomendable, mejor sepáralo en un div
, así como el ejemplo. El se queda con estas propiedades: ms-3 p-2 bg-primary text-light
(espaciado, color de fondo azul, color de texto en blanco). mientras que <i>
se queda con la clase que le convierte en icono.
Puedes modificar la propiedad padding-top
para subir/bajar el elemento y centrarlo a tu gusto