» »

Как установить иконки FontAwesome на сайт


Как установить иконки FontAwesome на сайт

Кто не знает, но на сайте FontAwesome, можно взять кнопки или иконки для сайта. Там они идут под всю тематику сайта, и теперь мы будем устанавливать их. Для начало нужно понять, как все работает, а здесь все просто, нужно с официального сайта FontAwesome взять стиль и установить его у себя на сайте. И потом уже вы можете копировать название ставить к примеру перед любым разделом или постом. Вот поставил их на регистрацию, но кому нужно тот посмотрит, все выглядит так.



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



Но давайте перейдем к установке:

Идем вверх сайта , чтоб отражались на всем сайте и в самый потолок устанавливаем стиль в head и /head чтоб работало корректно.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Как установили, теперь нам нужен сам каркас, куда мы и будем стиль картинки ставить.

Код
<i class="fa fa-user-secret"></i>


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

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

Код
<i class="fa fa-check-square" style="font-size:19px;"></i>


Здесь мы видим название стиля fa fa-check-square, это и есть кнопка и теперь она увеличена font-size:19px что вам позволит уже самому делать по размеру.

На форуме есть тема Стильные иконки и кнопки CSS на сайт где также все по этой тематике написано, и больше информация с вопросами, если что то здесь не поняли, можете в комментариях написать или перейти по ссылки на форум и там найти ответ.
14.05.2016 Просмотров: 584 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
Scheme
Scheme 14.05.2016 01:041
0
Здесь как раз на регистраций видно, чем больше шрифт, тем больше и сама кнопка будет. Просто автоматически становится по ширине такой же. А вот как сделать, чтоб самому увеличивать как тебе нужно?
Сафрон
Сафрон 14.05.2016 01:082
0
Где то записывал, но понимаю как можно сделать, но проверять пока не на чем, на форуме есть эта информация.
Сафрон
Сафрон 14.05.2016 01:093
0
Как найду, сразу скину, там мне кажется только [size=20] нужно добавить в сам каркас для стиля и все, точно не могу пока сказать.
Kosten
Kosten 14.05.2016 01:264
0
Не нужно не чего искать, все в материале добавил, так как на форуме раньше запелил эту тему, и там также найдете по этой тематики интересного.
Сафрон
Сафрон 14.05.2016 01:295
0
Иногда беру стили на этом сайте, что там также копируем, но он по некоторым кнопкам подходит, просто там намного удобнее найти, но мне так кажется.
ucozmental
ucozmental 14.05.2016 01:356
0
Давно уже пользуюсь этими иконками, не нужно не чего на фотошоп выводит и они намного лучше вписываются в дизайн. Но не могу найти архив, так нашел на официальном сайте, чтоб стиль не ставить, можно просто в корень сайта скачать и все.
tsakonter
tsakonter 14.05.2016 01:597
0
А не кто не подумал, что стили могут обновятся, и новые иконки поступать и только в таком может случай выводит не будет.
avatar