Как добавить иконку из сторонней библиотеки?
Если при создании пользовательской документации в программе Dr.Explain вы хотите, например, выделить смысловые блоки, отметить важное действие или просто сделать ваш документ привлекательнее — иконки решат задачу. Dr.Explain, как профессиональный инструмент, позволяет встраивать сторонний HTML-код, открывая доступ к множеству иконок из сторонних библиотек.
В этой статье мы расскажем, как это сделать без навыков программирования — только копированием и вставкой.
Добавим, например, такую 
иконку из популярной библиотеки Font Awesome.
иконку из популярной библиотеки Font Awesome.Font Awesome — это популярная библиотека иконок и шрифтов, которая позволяет добавлять векторные иконки на веб-сайты и в приложения с помощью HTML и CSS.
Ключевые особенности:
|
Чтобы добавить иконку, надо добавить ссылку на библиотеку, а потом добавить на страницу код нужной иконки.
Вот как это работает.
В данном примере воспользуемся сайтом https://cdnjs.com/ — там можно найти нужную ссылку. Впишите на этом сайте в поле поиска название библиотеки и нажмите предлагаемую ссылку:
После этого откроется страница со ссылками на разные версии библиотеки Fontawesome.
Копируйте ссылку https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css (актуальную на момент написания этой статьи):
Добавим копированную ссылку в настройки пользовательской документации в Dr.Explain.
Чтобы открыть окно настроек проекта, используйте один из описанных ниже способов:
-
перейдите в меню Проект и выберите пункт Настройки проекта;
-
нажмите сочетание клавиш Ctrl+Alt+P.
на Появится окно настроек проекта. Перейдите в HTML экспорт -> Структура страницы -> Дополнительно. Активируйте флажок Вставить дополнительные секции кода:
В поле До тега <BODY>, внутри тега <HEAD> вставьте скопированную ссылку:
Нажмите OK, чтобы сохранить изменения и закрыть окно.
Теперь у браузера будет доступ к этой библиотеке. Осталось прописать код нужной иконки.
Откройте сайт Font Awesome и копируйте код иконки, например, иконки "star":
Откройте нужный раздел документации, нажмите HTML 
в панели инструментов и добавьте этот скопированный код в окно HTML-фрагмент:
в панели инструментов и добавьте этот скопированный код в окно HTML-фрагмент:
Нажмите OK, чтобы сохранить изменения и закрыть окно.
Проверьте результат, переключившись на вкладку Просмотр HTML.
Пример использования иконок в контенте:
А так можно стилизовать иконку, например, изменив ее цвет на красный:
Иконки улучшают восприятие и читаемость текста, помогают выстраивать визуальную иерархию и навигацию. С возможностью подключения иконок из сторонних библиотек у авторов появляется широкий выбор для оформления контента.
Часто задаваемые вопросы
Можно ли использовать в Dr.Explain другие библиотеки иконок? Например, Material Icons?
Можно. Вы можете использовать в пользовательской документации иконки из любых доступных библиотек.
Как сделать иконку интерактивной? Например, чтобы она реагировала на наведение курсора?
Используйте для этого код CSS или JavaScript.
Есть ли лимит на добавление иконок в бесплатной версии Font Awesome?
Нет. Используйте иконки в бесплатной версии без ограничений.
Почему иногда шрифт в PDF файле отображается некорректно?
Почему это происходит и как этого избежать, читайте в разделе Почему шрифт в PDF отображается некорректно.
Как в пользовательскую документацию добавить фавикон?
О том, как использовать фавикон в онлайн руководстве пользователя, читайте в разделе Как добавить favicon.ico в онлайн документацию.
Как добавить изображение в документацию с помощью свойства background-image?
Читайте об этом в разделе Как вставить background-image с помощью CSS.
Почему при работе над общим проектом с помощью платформы Tiwri.com документы иногда блокируются?
Это может случаться из-за рассинхронизации проектов. Подробнее в разделе Конфликты версий в общих проектах Tiwri.com.