Putting Fontawesome icon in a solid circle

Hello

I would like to know how to use a fontawesome icon within a solid circle.

Like the attached mockup.

icon-mockup.jpg
I want to use it on this website (work in progress).  as the Left of the currently two gold ovals, near the top.   I will also need to position the final fontawesome like the other two ovals so that the text is to the left of the fontawesome oval.  (Am I over-explaining this? :)   )

link to site: Link to site
THanks!

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
Hi Rowby. Why put a column in that div? It doesn't make sense. In addition you have to keep in mind that Bootstrap columns width are relative to their parent: in that point of the page col-md-3 is not the 25% of the page but of its parent col-md-4.
So, delete that column and leave just:
<div class="social-links">
    <i class="fa fa-gavel fa-4x"></i>
</div>

Open in new window

Then you can try to play with the social-links width and padding to center the icon.
Rowby GorenAuthor Commented:
Hi Marco!

The columns etc were a part of the template I used.  I could change all that,

I didn't see your most recent comment until just now....

But in any case, I was working on this icon issue  while awaiting a solution.  Here's what I did

This is a joomla site. Core joomla still uses Twitter bootstrap 2.  But the template I'm using is based with Twitter Bootstrap 3.  Here's the code I have at this point.  And it "seems be working"  But I guess it could always be improved upon :)
<div class="module-content">
  <div class="custom">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <div class="row">
          <div class="col-md-3 col-sm-12"><span class="fa-stack fa-3x"> <i class="fa fa-circle fa-stack-2x" style="color:#B09A73"></i> <i class="fa fa-gavel fa-stack-1x" style="color:#ffffff"></i> </span>
          </div>
          <div class="col-md-9 col-sm-12">
            <h4>We FIGHT for our personal injury clients
            </h4>
            <p>Personal Injury requires personal attention to our clients. As Los Angeles injury attorneys, our reputation for aggressive representation and willingness to fight for our clients.
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="row">
          <div class="col-md-3 col-sm-12"><span class="fa-stack fa-3x"> <i class="fa fa-circle fa-stack-2x" style="color:#B09A73"></i> <i class="fa fa-thumbs-o-up fa-stack-1x" style="color:#ffffff"></i> </span>
          </div>
          <div class="col-md-9 col-sm-12">
            <h4>We will start working on your case right away
            </h4>
            <p>Physical evidence needs to be preserved, medical personal injury records must be obtained. Our office takes care of everything to get your claim started.
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="row">
          <div class="col-md-3 col-sm-12"><span class="fa-stack fa-3x"> <i class="fa fa-circle fa-stack-2x" style="color:#B09A73"></i> <i class="fa fa-stethoscope fa-stack-1x" style="color:#ffffff"></i> </span>
          </div>
          <div class="col-md-9 col-sm-12">
            <h4>We are here to help you.&nbsp;&nbsp;&nbsp;&nbsp;
            </h4>
            <p>If you are injured or in pain we will do our best to ensure that your medical needs are met immediately, whether you require pain management, chiropractic care or even surgery.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Open in new window

And here's the link to the updated site with the fontawesome icons  With working fontawesomes

Is it okay now?  Or should I do some tidying up?

Thanks,
Rowby
Marco GasiFreelancerCommented:
It looks okay, removing the social-links which wrapped the column gives the same result. I can't say how can impact the difference between Bootstrap 2 and 3 but it looks loke you have solved an issue yet, isn't it? :-)
Cheers

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Marco GasiFreelancerCommented:
Ah, Firebug console highlight a tons of errors and for sure it would be the same with Developer console in Chrome: I suggest you check your site using one of thses tools even to get rid of some code compatibility: for instance, the jquery version required by Bootstrap...
lenamtlCommented:
Hi,

To figure out the main diff Bootstrap 2 and 3:
http://getbootstrap.com/migration/

For fontawesome stacked icons check:
https://fortawesome.github.io/Font-Awesome/examples/

<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>

Open in new window

Rowby GorenAuthor Commented:
Thanks, Marco and  lenamtl

Over Fontawsome is certainly awesome!

Sorry for the huge delay in awarding the points!

Rowby
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.