ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как установить иконки FontAwesome на сайт

Как установить иконки 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 на сайт где также все по этой тематике написано, и больше информация с вопросами, если что то здесь не поняли, можете в комментариях написать или перейти по ссылки на форум и там найти ответ.

Добавление от 15.05.2022

Как можно понять, что ссылки на кнопки изменились, а точнее это обновленные ссылки, где просто как можно больше добавленных шрифтовых знаков. Здесь идут под установке в head и в CSS в самый вверх.

Подключаем стиль иконок c сайта разработчкиа через link:

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" />


или import
Код
@import url('https://use.fontawesome.com/releases/v5.15.3/css/all.css')


Это в том случаи, что бывает так, вы установили кнопку от fontawesome, а она не появилась. Что говорит, вы устанавливаете новую иконку, а стиль у вас на сайте установлен старый.
2016-05-14 Просмотров: 2789 Комментарий: (7)

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

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

Оставь свой отзыв

Комментарий: 7
Scheme
Scheme 2016-05-14 01:041
+1
Здесь как раз на регистраций видно, чем больше шрифт, тем больше и сама кнопка будет. Просто автоматически становится по ширине такой же. А вот как сделать, чтоб самому увеличивать как тебе нужно?

Шрифты обновились:

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Сафрон
Сафрон 2016-05-14 01:082
0
Где то записывал, но понимаю как можно сделать, но проверять пока не на чем, на форуме есть эта информация.
Сафрон
Сафрон 2016-05-14 01:093
0
Как найду, сразу скину, там мне кажется только [size=20] нужно добавить в сам каркас для стиля и все, точно не могу пока сказать.
Kosten
Kosten 2016-05-14 01:264
0
Не нужно не чего искать, все в материале добавил, так как на форуме раньше запелил эту тему, и там также найдете по этой тематики интересного.
Сафрон
Сафрон 2016-05-14 01:295
0
Иногда беру стили на этом сайте, что там также копируем, но он по некоторым кнопкам подходит, просто там намного удобнее найти, но мне так кажется.
ucozmental
ucozmental 2016-05-14 01:356
0
Давно уже пользуюсь этими иконками, не нужно не чего на фотошоп выводит и они намного лучше вписываются в дизайн. Но не могу найти архив, так нашел на официальном сайте, чтоб стиль не ставить, можно просто в корень сайта скачать и все.
tsakonter
tsakonter 2016-05-14 01:597
0
А не кто не подумал, что стили могут обновятся, и новые иконки поступать и только в таком может случай выводит не будет.
avatar