Как настроить Fick Icon Picker в 2sx c с FontAwesome 5?

Question

DNN 9.3.1 2sx c 10.25.2

Я добавил поле в модуле контента 2sx c под названием "Значок" и сделал его средством выбора шрифта. Моя оболочка DNN имеет FontAwesome 5, загружаемую через CDN в CSS.

При просмотре настроек поля выбора шрифта 2sx c он ожидает префикс CSS, классы Preview CSS и файлы для шрифтов. (Я получаю свои иконки FontAwesome 5 из CDN, но я понимаю, что мне нужно сослаться на них локально - поэтому я скачал Font Awesome 5 и загрузил его на свой сервер и сослался на него).

Но Font Awesome 5 (бесплатно ) имеет 3 различных префиксных класса для шрифтов: fab, far и fas. (бренды, обычные и solid).

Поэтому, когда я использую средство выбора, чтобы выбрать значок, оно не ставит перед ним правильный префикс. Я ожидаю, что когда я выбираю значок, он добавляет правильные префиксы, такие как «fa fa-user», но выводит только «fa-user», поэтому значок не появляется.

Мой шаблон бритвы выглядит так this:

<i class="@Content.IconPicker"></i>

Я неправильно это настраиваю или 2sx c Icon Picker не поддерживает Font Awesome 5? Как настроить параметры для работы Font Awesome 5?

Answer 1

это действительно сложно. Позвольте мне дать некоторую предысторию:

1. Fontawesome имеет разные файлы шрифтов и разные css файлы для таргетинга на значки
2. К сожалению, это вызывает проблемы в средстве выбора, поскольку средство выбора не может быть настроено показывать предварительные просмотры значков с разными префиксами - так что на данный момент сборщик обычно можно настроить только на показ одного набора этих значков
3. Та же проблема возникает с выводом, как вы заметили - в некоторых случаях другой префикс было бы важно, но сборщик не дает вам префикс, просто имя иконки

У нас также была другая проблема, которая нас действительно беспокоила: эти иконки действительно повредили наш рейтинг скорости страницы Google - ca. 10-20 баллов в зависимости от сценария! Из-за этого мы потратили почти 2 недели, чтобы найти лучшее решение. И мы нашли это :). Это просто не очень хорошо стандартизировано / задокументировано :(.

Вот как это работает:

1. в основном все иконки в любом случае имеют разные имена, поэтому префикс не имеет значения. Это был просто Оптимизация введена с помощью font-awesome, но в любом случае это не очень хорошо.
2. Так что нам нужен файл css, в котором перечислены все значки, но просто правильно используется правильный файл шрифта, независимо от того, какой префикс используется. Мы можем сгенерировать такой файл, и у нас уже есть несколько работающих сценариев, которые это делают, но он не находится в состоянии, которым мы могли бы поделиться: (
3. Этот css файл должен затем использоваться в средстве выбора значков
4. И на странице, потому что тогда префикс не имеет значения

Вот как мы это решаем. Извините, что это не проще.

Мы идем на шаг далее: если у вас есть коммерческая лицензия font-awesome, вы можете использовать на своей странице загрузчик JS, который вообще не использует шрифты, а просто получает 3-4 SVG, которые вы фактически включаете в страницу. Это дает нам экс 10-20 баллов на PageSpeed! Но поскольку это только коммерческая лицензия, я не могу поделиться этим с publi c. Если у вас есть коммерческая лицензия, я бы так и сделал go.