На прошлом уроке вы узнали, как добавлять
изображения на веб-страницу. Иногда, правда, люди испытывают трудности при поиске изображений или их создании. Поэтому сегодня я хочу
рассказать вам о Font Awesome. Font Awesome — это набор иконок,
которые можно использовать для страницы. Они знакомы
пользователям во всем мире. Я нахожусь на странице Font Awesome и хочу показать, как работать с этим ресурсом. Сначала я перейду в раздел иконок. Как видите, можно
выбрать тысячи разных иконок и украсить ими свою страницу.
Сайт очень легко использовать. Прежде всего, нужно сообщить веб-странице, что вы планируете использовать Font Awesome. В разделе «Начало работы» сайта Font Awesome
можно скопировать код. Давайте покажу вам, как это выглядит. Вот у меня простой файл. Тут есть только два новых момента. Первое — наличие ссылки
в разделе head страницы. Как вы знаете, head — это раздел со всей дополнительной информацией,
которая не видна пользователю. Я сделала следующее: я подключилась
к CDN Font Awesome. CDN расшифровывается всего лишь
как «сеть доставки содержимого». По факту вы заключаете соглашение, в рамках которого вы используете этот ресурс,
но добавляете специальную ссылку, которая помогает
понять, сколько людей его использует. Если мы перейдем к разделу body, вы заметите новый тег. Тег i — icon (иконка). Помните тег изображения? При использовании тега изображения
обязательно нужен источник, указание на конкретное изображение. Если вы используете Font Awesome,
нужно включить тег class, а в нем уже указать, какое изображение
вы хотите использовать. В данном случае я использую иконку fa-angry. Давайте посмотрим, как выглядит эта страница. Вуаля, на нас теперь смотрит злой человечек. Ресурс действительно
очень просто использовать. Каждый раз, когда вы добавляете этот тег,
у вас появляется маленькая иконка. Честно признаюсь, масштаб на моем экране сильно увеличен,
но если вы запустите этот код, иконка будет очень маленькой. Давайте я покажу вам,
как настроить размер иконки. Для этого я несколько раз скопировала эту строчку кода. В каждой строке я добавила один
дополнительный атрибут — желаемый размер. Здесь я попыталась сделать иконку очень-очень
маленькой, здесь средней, здесь большой. 2x, 3x, 5x, 10x — увеличение иконки в несколько раз. Теперь, если я снова обращусь к странице, она явно будет выглядеть иначе. Она слишком крупная для экрана, поэтому сделаем ее немного поменьше. И вот. Перед нами иконки разных размеров. Конечно, это не единственная иконка,
которую можно использовать. Одна из самых популярных — address-card. Я скопирую строку. Она всегда должна
начинаться с тега i и class =, fas ссылается на Font Awesome. Затем, вместо angry, давайте введем address-card. Думаю, эта иконка покажется вам знакомой. Вставлю разрыв строки,
просто для разнообразия. Теперь, если я обновлю страницу, вы увидите наверняка знакомую
вам иконку карточки. Иконки — это здорово.
Они добавляют привычные пользователям элементы, которые придают
странице профессиональный вид. Однако при использовании иконок
нужно соблюдать осторожность. Прежде всего, они не всегда
по умолчанию доступны. Если вы включите считывающее
устройство на этой странице, оно не покажет никакого содержимого вообще. Или даже хуже: иногда люди используют
иконки для ссылок на соцсети. Давайте я покажу вам еще один пример,
пока мы не закончили знакомство с Font Awesome. Вместо того чтобы просто
использовать эти иконки для оформления, я добавила их на мой сайт таким образом, что, если бы я захотела
добавить ссылку на профиль в Twitter, вот здесь, я добавлю иконку Twitter. Если я захочу добавить ссылку на Pinterest, я использую иконку Pinterest. И LinkedIn. Выглядит очень
классно. Давайте покажу. Вот. Все ссылки появились Эти иконки синие, потому что, как я уже сказала, они содержат ссылки. Я могу щелкнуть каждую
и попаду на свою страницу. Проблема такая: выглядят они классно, но я запущу средство проверки Wave, чтобы проверить,
правильная ли семантика у моего кода. Перехожу на размещенную версию сайта. Сейчас найду ее. Я не использую тот код,
над которым сейчас работала, потому что для проверки нужно разместить его на сервере. Перейду к верхней панели и использую средство проверки Wave. Проверка закончилась и средство выдало три ошибки. Не просто каких-то три ошибки, а очень серьезных ошибки. Они заключаются в том, что есть три ссылки, но к ним нет текста. Считывающее устройство не сможет определить, куда эти ссылки ведут. Оно не понимает,
что это Twitter, Pinterest или LinkedIn. Но этому есть простое и быстрое решение. Я использую атрибут aria-label в теге a или в теге i. Я просто напишу aria-label = Twitter, в этом случае. В следующей строке
я напишу aria-label=Pinterest и т.д. С помощью атрибутов aria-label вы помогаете считывающим устройствам определять, куда ведут эти ссылки,
считывать иконки. Это играет большую роль
при обеспечении доступности. Надеюсь, вам понравится работать с Font Awesome. В вашем распоряжении
огромное количество иконок, но если вы будете использовать
все эти клевые штуки, не забывайте про доступность
для как можно большего числа людей.