Как установить иконки 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, а она не появилась. Что говорит, вы устанавливаете новую иконку, а стиль у вас на сайте установлен старый. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
