Place item side by side with border redond CSS

Question

Place item side by side with border redond CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

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

        <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 how the icons are

html html5 css css3

asked by anonymous 26.09.2017 / 23:40

2 answers

0

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

  More examples here: link

Now putting one in front of the other has several forms, 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>

You can find it here: link

26.09.2017 / 23:51

Error in Sending Byte Array with Retrofit2 Questions about pusher do vue js

score 1 · Accepted Answer

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

More or less like this:

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

and Border Radius to create the circle

link

I hope it helps