Фон
Если вы читали мой последний пост, мы настроили Nuxt.js и Bulma.
В этом посте мы поговорим о том, как использовать Font Awesome вместе с Nuxt.js и Bulma. Если вы не знаете Font Awesome, это набор значков и инструментарий, позволяющий добавлять красивые векторные значки на ваш сайт.
Настраивать
Я буду использовать тот же репозиторий, который мы создали в предыдущем посте. Вы можете проверить ветку здесь на GitHub. Цель состоит в том, чтобы создать страницу входа со значками на ней, например:
Вы можете увидеть 5 значков: электронная почта, замок, логин, Google и LinkedIn. Мы объясним, как добавить их на нашу страницу входа. Но сначала нам нужно подготовить страницу. К счастью, с Nuxt.js и Bulma эту страницу очень легко настроить. Создайте новый файл с именем login.vue в нашем репозитории, например:
Этот фрагмент кода создает страницу входа в систему. Теперь запустите yarn dev, и вы должны увидеть такую страницу:
Мы использовали функцию макета и стиля Bulma для создания указанной выше страницы. Выглядит неплохо, но несколько значков, вероятно, сделают его лучше, чем мы и займемся дальше.
Установить Font Awesome
Мы можем использовать две версии Font Awesome: бесплатную и профессиональную. Мы собираемся использовать здесь бесплатную версию. Nuxt.js имеет модуль для Font Awesome, чтобы использовать его, запустите:
yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D yarn add @fortawesome/fontawesome-svg-core
Эта команда устанавливает ядро Font Awesome и два бесплатных набора значков: сплошные и бренды, которые нам нужны для достижения нашей цели.
Затем нам нужно настроить nuxt.config.js для загрузки значков, чтобы мы могли использовать их в login.vue файле.
- Сначала добавьте
'@nuxtjs/fontawesome'вbuildModulesвnuxt.config.jsфайл. - Во-вторых, настройте загрузку нужных нам иконок. Здесь нужны ВСЕ сплошные и фирменные значки, чтобы все заработало.
Настроенный nuxt.config.js должен выглядеть так.
Настроив значки для загрузки, мы можем использовать их на нашей login.vue странице. Откройте этот файл и добавьте значок под тегом ввода, например:
Обновите браузер, и вы увидите красивый значок конверта рядом с вводом электронной почты:
А теперь позвольте мне объяснить, что только что произошло. <font-awesome-icon :icon="['fas', 'envelope']"/> генерируется модулем nuxtjs/fontawesome для вызова значков Font Awesome. Каждый раз, когда вам нужно добавить значок, вам нужно использовать этот тег. 'fas' означает font awesome solid, который мы установили ранее вместе с font awesome brands. А внутри набора fas есть значок envelope, который нам нужен.
Вы можете спросить, как мы находим нужный значок. Давайте немного попрактикуемся - добавим значок замка внутри ввода пароля. Для этого мы можем:
- Найдите замок на сайте fontawesome.com. Вы увидите страницу замка с разными стилями. Нам нужен прочный замок вроде этого: https://fontawesome.com/icons/lock?style=solid
- Откройте эту страницу, вы увидите HTML-тег
<i class="fas fa-lock"></i>. - Переведите этот тег в стиль Nuxt.js:
<font-awesome-icon :icon="['fas', 'lock']"/>
Затем добавьте этот тег под тегом ввода пароля, например:
После этого обновите браузер, и вы должны увидеть значок замка:
Вот и все. Мы добавили значок замка внутри ввода пароля. Теперь к трем кнопкам можно добавить еще три: «Вход», «Google» и «LinkedIn». Вы можете начать поиск на сайте Font Awesome и перевести названия значков в стиль Nuxt.js. Если они вам понадобятся, я перечислю их все ниже:
<span class="icon"><font-awesome-icon:icon="['fas', 'sign-in-alt']"/></span> <span class="icon"><font-awesome-icon:icon="['fab', 'google']"/></span> <span class="icon"><font-awesome-icon:icon="['fab', 'linkedin']"/></span>
Окончательный вид вашей страницы входа должен быть таким:
Некоторые улучшения
На данный момент все должно работать. Но если вы хотите упростить или ускорить работу, мы можем сделать две вещи.
Используйте имя пользовательского компонента
Тег <font-awesome-icon> слишком длинный, чтобы набирать его каждый раз. К счастью, вы можете определить свое собственное имя компонента. В вашем nuxt.config.js файле найдите раздел для fontawesome, добавьте component: 'fa'. Именно так:
С именем пользовательского компонента мы можем использовать тег <fa /> для определения значков вместо <font-awesome-icon />. Поэтому значки, которые мы определили выше, можно сократить до следующего:
<fa :icon="['fas', 'envelope']"/> <fa :icon="['fas', 'lock']"/> <fa :icon="['fas', 'sign-in-alt']"/> <fa :icon="['fab', 'google']"/> <fa :icon="['fab', 'linkedin']"/>
Более того, для значков в fas мы можем просто использовать имя значка вместо указания набора значков. Таким образом, значки выше можно упростить, как показано ниже:
<fa icon="envelope"/> <fa icon="lock"/> <fa icon="sign-in-alt"/> <fa :icon="['fab', 'google']"/> <fa :icon="['fab', 'linkedin']"/>
Загружайте только нужные значки
Пока что мы настроили загрузку всего набора иконок в nuxt.config.js файл:
По правде говоря, вам нужно загрузить только те иконки, которые вам нужны. В этом случае вам нужно загрузить всего 5 иконок. Это поможет сэкономить ресурсы при запуске в производство.
Для этого найдите имена, которые должны быть загружены. Да, снова имена, но это имена, используемые в nuxt.config.js, и их очень легко «угадать». Формат fa + PascalCase of the component name. Например, имя значка конверта - faEnvelope, значок входа - faSignInAlt, а значок LinkedIn - faLinkedin. Выясните имена, а затем обновите раздел fontawesome в файле nuxt.config.js следующим образом:
И ваша страница входа должна отображать точно такую же страницу с 5 значками, но с пользовательским именем компонента и меньшей нагрузкой.
Заключение
Мы сделали страницу входа с красивыми значками. Bulma помогает настроить макет и стилизовать элементы. Font Awesome предоставляет нам нужные значки. И все они работают с Nuxt.js.
Оставьте мне комментарий, если у вас есть вопрос или у вас есть способ лучше. Я бы хотел услышать! Спасибо за чтение и удачного кодирования!
