Главная > Руководства > Добавляем логотип Bitcoin на собственный сайт

Добавляем логотип Bitcoin на собственный сайт


8 сентября 2014, 15:00. Разместил: Design FactoRy
Вы наверняка уже слышали про Bitcoin. Bitcoin – это цифровая валюта, которая использует пиринговую open source технологию для обработки платежей, и при этом не имеет централизованного органа регулирования или банка. Если вы использует Bitcoin в качестве шлюза для приема платежей, то мы рекомендуем вам оповестить об этом посетителей. В нашем сегодняшнем руководстве вы сможете узнать, каким образом можно легко и просто добавить кнопку с изображением Bitcoin на собственный веб-сайт при помощи HTML.

В иконке используется Font Awesome, который можно скачать здесь.

Результат

Здесь мы пытаемся добиться следующего результата:

Добавляем логотип Bitcoin на собственный сайт

HTML-код конечного результата должен быть следующим. Что же касается CSS, то вам нужно просто прокрутить страницу вниз:

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

Разрабатываем иконку

Иконка состоит из заглавной B и двух вертикальный линий, которые перечеркивают ее наподобие знака доллара ($). Иконка отображена под углом, который составляет примерно 15 градусов.

Результат с иконкой Bitcoin

Давайте взглянем на то, как должна смотреться иконка Bitcoin:

Добавляем логотип Bitcoin на собственный сайт

CSS-код для иконки Bitcoin

Следующий код CSS используется для создания Bitcoin-иконки:

.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;
}

Не забудьте изменить отступы и font-size на нужные вам значения.

HTML-код для иконки Bitcoin

Наш HTML-код будет выглядеть следующим образом:

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

Текст логотипа Bitcoin

Как вы уже, вероятно, догадались, в качестве шрифта для текста логотипа выступает Ubuntu от Dalton Maag.

Результат

Добавляем логотип Bitcoin на собственный сайт

Добавляем шрифт на сайт

Вы можете добавить шрифт на сайт следующим образом:

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

CSS-код для текста логотипа Bitcoin

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

HTML-код для текста логотипа Bitcoin

Добавьте текст логотипа Bitcoin туда, куда вам понадобится:

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

Вернуться назад