Center Font-Awesome buttons

by Charles Butler

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<div>
    <i id=ico class='icon icon-2x icon-camera'></i>
    <span id="text">Hello world</span>
</div>

<div>
    <span id="text">Hello world</span>
</div>


<div>
    <i id=ico2 class='icon icon-2x icon-camera'></i>
    <span id="text">Hello world</span>
</div>

<div>
    <i id=ico3 class='icon icon-2x icon-camera'></i>
    <span id="text">Hello world</span>
</div>

<span class="acc">527048194</span>

CSS

body {
    padding:30px;
}
span.acc {
    display: inline-block;
    border: 1px solid #aaa;
    background: #ccc;
    color: #000;
    padding: 3px 6px 3px 6px !important;
    line-height: 20px;
    margin: 3px 4px 4px 3px !important;
    font-size: 14px;
    border-radius: 3px;
    letter-spacing: 2px;
}
span.acc:hover {
    display: inline-block;
    border: 1px solid #999;
    background: #aaa;
    color: #000;
    cursor: default;
}

span.acc:before{
   font-family: FontAwesome;
   display: inline-block;
   padding-right: 6px;
   vertical-align: middle;
}

span.acc:before {
   content: "\f2bd";
}
div {
    border: 0;
    border-radius:5px;
    padding: 8px 50px;
    display: inline-block;
    color: #FFF;
    background: #f02d00;
}

#ico { 
    float:left;
    line-height:24px;
    padding-right:10px;
    font-size: 20px;
}

#ico3 { 
    float:left;
    line-height:24px;
    padding-right:10px;
    font-size: 10px;
}
#ico2 { 
    float:left;
    line-height:24px;
    padding-right:10px;
    font-size: 17px;
}
#text {
    float:left;
    line-height:24px;
    font-size: 20px;
}

#text2 {
    float:left;
    line-height:24px;
    font-size: 40px;
}