Place item side by side with border round CSS

Question

I am developing a web application ,and would like my icons i class="fa fa-user" and i class="fa fa-shopping-cart" stood side by side and wanted to be a circle around each one but I’m not getting.

        <div class="col-6 col-md-4">

            <ul class="menu_2">
                <div class="user"><li><i class="fa fa-user"></i> Entre/Cadastre-se<i class="fa fa-angle-down"></i></li></div>
                <div class="carrinho"> <li><i class="fa fa-shopping-cart">Carrinho</i></li></div>

            </ul>
        </div>

     .menu_2{
padding: 10px;
font-size: 10pt;  
margin-top: 40px;

}

 .user{
margin-right: 30px;
font-size: 13pt;
border-radius: 1px solid ;
}

 .carrinho{
margin-left: 240px;

}

Look at the icons

Answer 1

You can use float: left; in the CSS where you want to put side by side:

Sort of like this:

.user{
margin-right: 30px;
font-size: 13pt;
border-radius: 1px solid ;
float: left;
}

and Border Radius to create the circle

https://www.w3schools.com/cssref/css3_pr_border-radius.asp

I hope it helps

Answer 2

As for putting a circle on the icon you can use Stacked Icons from the font-awesome itself, it looks like this:

<span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span> More examples here: http://fontawesome.io/examples/

Now putting one in front of the other has several shapes, but since you are probably using bootstrap and are using ul, you can use this bootstrap class

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



 <div class="col-6 col-md-4">
    <ul class="menu_2 list-inline">
        <li class="user"><i class="fa fa-user"></i> Entre/Cadastre-se<i class="fa fa-angle-down"></i></li>
        <li class="carrinho"><i class="fa fa-shopping-cart">Carrinho</i></li>
    </ul>
</div>

This you find here: https://getbootstrap.com/docs/3.3/css/#type-lists