—»     —»   Добавляем логотип Bitcoin на собственный сайт
  Раздел: Руководства   Нет комментариев  

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



Вы наверняка уже слышали про 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>
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: логотип, Bitcoin, иконки, CSS
Опубликовал Design FactoRy   Прочитано (раз): 3653   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728