Символ шрифта с иконками вместо картинки на кнопке

[dnekrasov]

Механизм, который позволяет использовать иконку символьного шрифта вместо картинки на кнопках.

Уж очень мне не нравится стандартный механизм добавления картинки на кнопку, поэтому, пару лет назад, начал искать альтернативу и остановился на символьных шрифтах (таких как FontAwesome). Вот что из этого получилось:

IconicFontGlyph.zip 

Под Windows работает без проблем - на других системах не пробовал.

Как это работает

1. Добавляем в проект модуль UIExt.IconicFont.pas
2. Добавляем в проект модули описания шрифтов, которые будут использоваться (см. ниже)
3. Описываем символ, который будет использоваться в качестве иконки (см. ниже)
4. В обработчике  события OnApplyStyleLookup кнопки пишем одну строчку - TIconicFont.ApplyButtonStyle(TCustomButton(Sender));

Модули описания шрифтов

• UIExt.IconicFont.FA.pas -  Font Awesome
• UIExt.IconicFont.IM.pas - IcoMoon
• UIExt.IconicFont.IML.pas - IcoMoon Lindua
• UIExt.IconicFont.IMLN.pas - IcoMoon Linear
• UIExt.IconicFont.MDI.pas - Material Design Icons
• UIExt.IconicFont.WHHG.pas - WebHostingHub Glyphs

Описание символа

Для описания символа используется свойство StyleName (не знаю как остальные - лично я его нигде не использую). Само описание - это строка в определённом формате:

[Короткое имя шрифта];[код символа];[размер шрифта];[цвет]

2 первых поля - обязательны. Короткое имя шрифта можно увидеть в его модуле описания (TIconicFont.Short)

Примеры можно увидеть на скриншотах выше (текст над кнопками).

Ну и напоследок - небольшая демка IconicFontDemo.zip

[#WAMACO]

В демке IconicFontDemo все иконки - квадратами!

Просто скачал, распаковал, запустил в Tokyo 10.2.2

Изменено 12 января, 2018 пользователем wamaco

[sinuke]

2 минуты назад, wamaco сказал:

В демке IconicFontDemo все иконки - квадратами!

Просто скачал, распаковал, запустил в Tokyo 10.2.2

если это Windows, то шрифт должен быть установлен в системе

[dnekrasov]

2 минуты назад, wamaco сказал:

В демке IconicFontDemo все иконки - квадратами!

Проблема с регистрацией шрифтов.

Какая винда? Рядом с ехе-шником папка Fonts создалась? Если да - попробуйте руками установить шрифты, находящиеся в ней.

[#WAMACO]

Только что, sinuke сказал:

если это Windows, то шрифт должен быть установлен в системе

Я это понимаю, но я предположил, что программа, при запуске как-то регистрирует их!  Сорцы не смотрел

[dnekrasov]

1 минуту назад, sinuke сказал:

если это Windows, то шрифт должен быть установлен в системе

Демка сама должна регистрировать шрифты. Если нет - то где-то проблема

[#WAMACO]

6 минут назад, dnekrasov сказал:

Проблема с регистрацией шрифтов.

Какая винда? Рядом с ехе-шником папка Fonts создалась? Если да - попробуйте руками установить шрифты, находящиеся в ней.

Windows 10, папка Fonts  создается, права Администратора

Интересный эффект, если запустить демку один раз, то "квадраты", если не закрывая, запустить еще раз (второй экземпляр), то иконки показывает!

Изменено 12 января, 2018 пользователем wamaco

[dnekrasov]

3 минуты назад, wamaco сказал:

Интересный эффект, если запустить демку один раз, то "квадраты", если не закрывая, запустить еще раз (второй экземпляр), то иконки показывает!

Это конечно интересно, вот только воспроизвести у меня не получается... Так что, пока, исправить не могу

[#WAMACO]

Вверху первый запуск демки, внизу запуск второго экземпляра демки - все появляется!

[dnekrasov]

В 12.01.2018 в 16:56, wamaco сказал:

Интересный эффект, если запустить демку один раз, то "квадраты", если не закрывая, запустить еще раз (второй экземпляр), то иконки показывает!

Единственное моё предположение из-за чего это может быть - это момент регистрации шрифтов.

Т.к. у меня это воспроизвести не получается - то у меня большая просьба к @wamaco отредактируйте, плз, файл проекта и попробуйте запустить

...
begin
  TIconicFont.FontsReg;
  try
    Application.Initialize;

    TStyleManager.TrySetStyleFromResource('STYLE_Dark');

    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

Ну и если запустится нормально, то еще 2 варианта (чтоб точно знать когда надо регистрировать шрифты)

1:

...
begin
  Application.Initialize;

  TIconicFont.FontsReg;
  try
    TStyleManager.TrySetStyleFromResource('STYLE_Dark');

    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

2:

...
begin
  Application.Initialize;

  TStyleManager.TrySetStyleFromResource('STYLE_Dark');

  TIconicFont.FontsReg;
  try
    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

 

[#WAMACO]

Первый и второй вариант работает!

Последний - НЕТ!

Я так понимаю, по смыслу, этот самый правильный

...
begin
  Application.Initialize;

  TIconicFont.FontsReg;
  try
    TStyleManager.TrySetStyleFromResource('STYLE_Dark');

    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

 

Изменено 14 января, 2018 пользователем wamaco

[dnekrasov]

39 минут назад, wamaco сказал:

Первый и второй вариант работает!

Последний - НЕТ!

Из этого следует вывод, что шрифты надо регистрировать до применения стиля (если через TStyleManager) или до создания формы (если StyleBook).

В общем лучше делать сразу после Application.Initialize - думаю это правильнее всего.

[#WAMACO]

Было бы хорошо, перед регистрацией шрифта, проверять наличие его в системе.

Это снизит время запуска приложения.

[Владимир Б.]

Привет всем!

У кого-то получилось подружить данную библиотеку с Windows до 10 версии?

Изменено 3 апреля, 2019 пользователем Владимир Б.

[vahidch]

В 1/12/2018 в 4:36 PM, dnekrasov сказал:

A mechanism that allows you to use a symbol font icon instead of a button image.

I really don’t like the standard mechanism for adding a picture to a button, so a couple of years ago I started looking for an alternative and settled on character fonts (such as FontAwesome). That's what came out of it:

IconicFontGlyph.zip 78 \ u043a \ u041147 downloads  

It works without problems under Windows - I have not tried it on other systems.

How it works

1. Add the UIExt.IconicFont.pas module to the project 
2. Add the font description modules to be used in the project (see below)
3. We describe the symbol that will be used as an icon (see below)
4. In the OnApplyStyleLookup  button event handler, write one line -  TIconicFont.ApplyButtonStyle (TCustomButton (Sender));

Font Description Modules

• UIExt.IconicFont.FA.pas -   Font Awesome
• UIExt.IconicFont.IM.pas -  IcoMoon
• UIExt.IconicFont.IML.pas -  IcoMoon Lindua
• UIExt.IconicFont.IMLN.pas -  IcoMoon Linear
• UIExt.IconicFont.MDI.pas -  Material Design Icons
• UIExt.IconicFont.WHHG.pas -  WebHostingHub Glyphs

Character Description

To describe the symbol, the StyleName property is used (I do not know how the others are; personally, I do not use it anywhere). The description itself is a string in a specific format:

[Short font name]; [character code]; ;

The first 2 fields are required. The short font name can be seen in its description module (TIconicFont.Short)

Examples can be seen in the screenshots above (the text above the buttons).

And finally, a small demo of  IconicFontDemo.zip

If possible, run this project for Android(FMX)
No specific instructions for loading and launching fonts are included in the This Method
Thank you