Добавляем иконки Font Awesome в приложение NativeScript

Добавляем иконки Font Awesome в приложение NativeScript

Создание иконок для приложения это довольно сложный процесс. Не только с точки зрения креативности, но также из-за трудностей при показе изображений на разных размерах экрана и разных разрешениях. У веб-разработчиков меж тем есть чрезвычайно удобный пакет иконок Font Awesome. И сегодня мы научимся с ним работать в мобильных приложениях.

Перед тем, как перейти к коду, разберёмся почему вообще использование шрифтов это отличное решения для мобильных приложений.

Представим, что у вас есть приложение, в котором используются 20 разных иконок. Android работает на различных экранах с большим количеством разрешений, требуя разный размер иконок для каждого из них. К примеру, каждая иконка должна иметь разные размеры для mdpi, hdpi, xhdpi, xxhdpi, и xxxhdpi экранов. В принципе, не так сложно нагенерировать иконки для всех этих размеров, но они довольно сильно скажутся на размере приложения в будущем.

При использовании шрифтов, вы добавляете к проекту всего один файл шрифта, размером ~100 кб, в котором есть сотни разных иконок. Эти иконки будут автоматически масштабироваться, исходя из разрешения экрана, без увеличения размера приложения.

Итак, приступим.

Начнём с чистого проекта NativeScript для Android и iOS. В консоли выполните следующие команды:

tns create ExampleProject
cd ExampleProject
tns platform add ios
tns platform add android

Теперь скачаем свежий релиз Font Awesome. Распакуем архив и найдём файл TTF. Скорее всего, он будет называться fonts/fontawesome-webfont.ttf. Скопируем этот файл в нашу папку так: app/fonts/fontawesome-webfont.ttf.

Приложение NativeScript автоматически подхватит шрифты из папки fonts.

Теперь откроем файл app/app.css и создадим класс с новым свойством font-family. Вот так должно работать:

.font-awesome {
font-family: "FontAwesome";
}

Не важно, как будет называться наш класс, главное — указать свойство font-family. Имя шрифта я нашёл в официальной документации к Font Awesome.

Откроем файл app/main-page.xml и немного его изменим:



Leave a Comment

Чтобы не пропустить новые статьи, оставь свой Email

Поздравляем вы подписаны на новости ТехноДжем!

TВо время отправки данных произошла ошибка. Попробуйте ещё раз

Оставляя свою почту