.bitcoin-icon .fa{background:#f7931a;color:#fff;padding:15px 25px;font-size:39px;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;-webkit-transform: rotate(15deg);-moz-transform: rotate(15deg);-ms-transform: rotate(15deg);-o-transform: rotate(15deg);transform: rotate(15deg);-webkit-transform-origin: 50% 50% 0;-moz-transform-origin: 50% 50% 0;-ms-transform-origin: 50% 50% 0;-o-transform-origin: 50% 50% 0;transform-origin: 50% 50% 0;}.bitcon-text{font-family: ‘Ubuntu’, sans-serif;color:#4d4d4d;font-size:39px;font-style:italic;font-weight:bold;}You may have heard of Bitcoin. Bitcoin is a digital currency that uses peer-to-peer open source technology to operate and has no central authority or banks. If you are using bitcoin or support bitcoin is any way, you might want to show the bitcoin icon or logo on your website. This tutorial is designed to show you how you can do just that, add the icon of logo to your website or any HTML web page.

The icon uses Font Awesome, which you can get here.

If you don’t already have Font Awesome installed on your website and would like to know how-to, you can read my tutorial here.

The Result

What we are trying to achieve is the following Bitcoin icon:

** bitcoin

The HTML for the end result will look like this. For the CSS, please see below.

<div class="bitcoin-icon bitcon-text"><i class="fa fa-btc"></i> bitcoin</div>

Creating the Icon

The icon consists of a capital B and two vertical lines through it – just like the dollar sign ($). The icon is on a angle, which seems to be 15 degrees.

Bitcoin Icon Result

Here is what the Bitcoin icon will look like:

**

Bitcoin Icon CSS

The following is the CSS that will create the Bitcoin icon:

.bitcoin-icon .fa { background: #f7931a; color: #fff; padding: 10px 15px; font-size: 175%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); -webkit-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; }

Make sure you change the padding and font-size to desired size

Bitcoin Icon HTML

This is what the HTML will look like:

 <div class="bitcoin-icon"> <i class="fa fa-btc"></i> </div>

Bitcoin Logo Text

Based on best guess, the Bitcoin logo text uses the Ubuntu font by Dalton Maag.

<

h3>The Result

<

h3>

bitcoin

Add the Font To Your Website

You can add the font to your website like so:

<link href="http://fonts.googleapis.com/css?family=Ubuntu:400italic,500italic,700italic" rel="stylesheet" type="text/css">

Bitcoin Logo Text CSS

 .bitcon-text { font-family: 'Ubuntu', sans-serif; color: #4d4d4d; font-size: 39px; font-style: italic; font-weight: bold; }

The Bitcoin Logo Text HTML

Add the Bitcoin logo text where ever you want like this:

<div class="bitcon-text">bitcoin</div>