Так как движок работает в кодировке UTF-8 то у нас появилась замечательная возможность использовать иконочные шрифты предназначенные для Веб
Что бы было проще я разработал аддон который сам автоматически подключает шрифт в приложение и отдает иконку по уже имеющемуся имени.
Версия
0.1
Описание
Аддон предназаначен для обработки и хранения иконок в виде шрифтов для использования в приложении.
Есть совместимость с принципом получения иконки в Веб.
То есть если раньше в Вебе мы использовали например:
- Code:
<i class="fa fa-money"></i>
Так же аддон воспринимает уже готовые иконочные шрифты предназначенные для Веб.
Для корректной работы шрифта необходимо два файла:
- Сам файл шрифта в формате *.ttf
- Файл каскадной таблицы стилей в формате *.css. В котором должны быть перечислены все классы для иконок.
Оба файла должны иметь одинаковое название, в плоть до регистра букв, и отличатся только расширением.
Внимание!
Аддон не будет работать с файлами стилей которые имеют в названии *.min.css
Файл должен называться "FontName.css"
Файлы подключаемых шрифтов и таблиц стилей могут находится в ресурсах.
Зависимости
Для корректной работы необходим подключенный аддон Storage
Так же расширение для движка PQEngineFS, которое будет в ближайшем снапшоте после 8 апреля 2015 или официальный релиз версии движка 0.5.2 и выше.
Конфигурация
Для коректной работы аддона необходимо наличие файла конфигурации в директории приложения.
Название файла конфигурации "iconFonts.json"
Содержание:
- Code:
{ "PQStudio" : { "path" : "fonts/", "resource" : true }, "FontAwesome" : { "path" : "fonts/", "resource" : true } }
Значение path это дочерняя директория в которой находятся файлы шрифта. Обязательно на конце должен быть слешь.
Значение resource может принимать два значения true или false. Если указан true то аддон будет загружать файлы из ресурсов приложения. Если false то из директории приложения.
Как использовать
- Code:
require_once("qrc://%%projectname%%/%%addonpath%%/Icon.php"); /* Если файл конфигурации находится в корневой директории приложения */ $icon = new Icon(); or /* Если файл конфигурации находится в дочерней директории приложения */ $icon = new Icon('system'); class MainWindow extends QWidget { public function __construct() { parent::__consctruct(); /* Задаем иконочные шрифт(ы) для приложения */ $this->styleSheet = 'font-family: %%FontName1%%, %%FontName2%%'; } /* ... */ public function initComponents() { $this->label = new QLabel($this); /* Используем иконку */ $this->label->text = Icon::get('fa-money'); or /* Используем цветную иконку */ $this->label->text = Icon::get('fa-money', '#1484c9'); or /* Используем иконку определенного размера */ $this->label->text = Icon::get('fa-money', 20); or /* Используем цветную иконку определенного размера */ $this->label->text = Icon::get('fa-money', '#1484c9', 20); or /* Используем цветную иконку определенного размера */ $this->label->text = Icon::get('fa-money', 20, '#1484c9'); } }
Пример
- Code:
require_once 'qrc://Storage/Storage.php'; require_once 'qrc://Icon/Icon.php'; $icon = new Icon('system'); class MainWindow extends QWidget { public function __construct() { parent::__construct(); $this->styleSheet = 'font-family: PQStudio,FontAwesome;'; $this->initComponents(); } private function initComponents() { $this->layout = new QVBoxLayout; $label1 = new QLabel($this); $label1->text = Icon::get('fa-money', '#1484c9'); $label2 = new QLabel($this); $label2->text = Icon::get('fa-money', 20); $label3 = new QLabel($this); $label3->text = Icon::get('fa-money', '#1484c9', 20); $label4 = new QLabel($this); $label4->text = Icon::get('fa-money', 30, '#1484c9'); $this->layout->addWidget($label1); $this->layout->addWidget($label2); $this->layout->addWidget($label3); $this->layout->addWidget($label4); } } $mainWindow = new MainWindow; $mainWindow->show(); qApp::exec();
Я использую сервис IcoMoon.io для создания своих собственных шрифтов.
Первым делом необходимо подготовить иконки для загрузки на сервис. Иконки можно найти на просторах интернета или создать самому. Обязательно то что каждая иконка должна быть сохранена как отдельный файл и обязательно в векторном формате. Лучше всего svg.
Далее открываем страницу сервиса и переходим в меню.
Выбираем пунтк меню "Manage Projects"
Откроется страница управления проектами.
В ней необходимо создать новый проект и дать ему удобное и понятное вам название.
Переходим в проект используя пункт "Load".
Теперь нам необходимо загрузить наши иконки. Для этого воспользуемся кнопкой "Import Icons".
Выбираем необходимые нам иконки и подтверждаем выбор.
Далее мы увидим как наши иконки появились в проекте.
Для коректного отображения иконок необходимо создать сетку для них.
Нажимаем на значек меню у "Набора".
В открывшемся меню выбираем пункт "Get info"
В появившемся окне нажимаем на кнопку "Resize Grid size" и указываем размер сетки.
Так же нам необходимо отредактировать мета данные шрифта.
Как только мы сделали все настройки, переходим к генерации шрифта.
Для этого нам необходимо выделить те иконки которые войдут в шрифт и нажать на кнопку "Generate Font"
Откроется страница генерации шрифта.
Нам необходимо сделать настройки шрифта. Для этого нажимаем на кнопку "Preferences".
Тут мы задаем название шрифта, префикс для стилей и тд и тп.
Сохраняем настройки и переходим непосредствено в редактированию данных о наших иконках.
После генерации к названию иконки будет прибавлен префик, который вы указали в настройках.
Следовательно моя иконка будет досутпна по имени "pq-label".
Как только мы все настроили, можно скачивать готовый шрифт.
Нажимаем на кнопку "Download" и радуемся
После этого можно переносить наш шрифт в приложение и использовать иконки
Внимание!
Так как сервис бесплатен то ваш проект хранится в локальной памяти вашего браузера и на другом устройстве он не будет доступен. Для того что бы вы могли редактировать ваш шрифт на любом другом устройстве необходимо его скачать.
Нажмите на меню "Набора" и выбирете пункт "Download JSON"
Для загрузки скачано проекта необходимо в Менеждере проектов выбрать "Import Project" и выбрать скачаный json файл
Архив
Icon_0.1.7z
Архив необходимо скачать и распаковать в директорию addons установленной программы PQBuilder
Пример пути куда необходимо распаковывать архив:
C:\Program FIles (x86)\PQBuilder\addons
