Иконки и ссылки

Стандартный набор иконок

Зачастую просто текстовой ссылки достаточно и необходимо добавить визуальное обозначение того или иного действия. В этой ситуации Вы можете использовать классы иконок представленные ниже.
Они также имеют свои модификаторы, для типа отображения при разных условиях.


<a href="#" class="ob-link-phone">Example link</a>
<a href="#" class="ob-link-email ">Example link</a>
<a href="#" class="ob-link-user">Example link</a>
...
<a href="#" class="ob-link-out">Example link</a>

Пример

Иконки без текста

Есть случаи, когда ссылку нужно представить в виде иконки без описания.
Для отображения иконок без текста необходимо использовать модификатор

ob-icon


<a href="#" class="ob-link-phone ob-icon"></a>
<a href="#" class="ob-link-email ob-icon"></a>
<a href="#" class="ob-link-user ob-icon"></a>
...
<a href="#" class="ob-link-out"></a>

Пример

Блочные ссылки

Блочная ссылка - это ссылка в несколько строк с иконкой, выровненной по первой строке. Для этого используется модификатор

.ob-block

Таким образом, независимо от количества содержания ссылки, ее иконка всегда будет в левом верхнем углу, а сам блок - правильный отступ под иконку.


<a href="#" class="ob-link-user ob-block">Example link Example link<br /> Example link Example link</a>

Пример

Пунктирные ссылки

Пунктирные ссылки необходимы для информирования о том, что функционал данной ссылки будет отработан на этой же странице. Пунктирная ссылка также может использоваться в сочетании с иконками.


<a href="#" class="ob-link-dashed">Example link</a>
<a href="#" class="ob-link-dashed ob-link-phone">Example link</a>

Пример