AXForum  
Вернуться   AXForum > Microsoft Dynamics NAV > NAV: Blogs
NAV
Забыли пароль?
Зарегистрироваться Правила Справка Пользователи Сообщения за день Поиск Все разделы прочитаны

 
 
Опции темы Поиск в этой теме Опции просмотра
Старый 29.05.2019, 19:14   #1  
Blog bot is offline
Blog bot
Участник
 
25,459 / 846 (79) +++++++
Регистрация: 28.10.2006
Navigate Into Success: Using Font Awesome icons in control add-ins
Источник: http://vjeko.com/using-font-awesome-...ntrol-add-ins/
==============

This post has been long overdue. I’ve had it in my to-do list for nearly four years now, but it always ended up in the not today category. Funny how many times I’ve implemented it already, and how many times I’ve presented this, and I never ever found a few minutes to create a demo repository and a blog to come with it. So, here we go.

Including web fonts in your control add-ins is no rocket science, really. Control add-ins are just pieces of HTML, CSS, and JavaScript running in an iframe, so whatever you can do within an iframe from anywhere else, you can do it from control add-ins. Web fonts are no different. The problems start if you want to package web fonts into the control add-in so that you can use them even when your BC/NAV instance is running in an isolated network, or if you simply want to eliminate any external dependencies.

Control add-ins support packaging script, stylesheet, and image files. This could make you think that you cannot include web fonts. But that would be wrong. If you read my blog post about abusing images to load HTML files, then it might give you some ideas. Yes, you can use the same trick to load web fonts or just about any other external resource.

Let’s take a look how to include a web font, and let’s use Font Awesome as an example. Because it’s just awesome.



Start by downloading the free distribution of Font Awesome from the Hosting Font Awesome Yourself page. It contains a lot of files, but you don’t need them all.

The first group of files you need to include into your AL project is the web fonts themselves. Create a subfolder called Fonts, and then put all the *.woff files from the zip file you just downloaded. In my example, I used fa-regular-400.woff and fa-solid-900.woff.

Font Awesome comes with far more files here – you have *.woff2 files, *.ttf files, *.eot files, *.svg files… And in fact if you use Font Awesome as-is, then you actually need all those files. However, in reality, the only files you really need are *.woff files, the Web Open Font Format files. The WOFF format is supported on all relevant platforms as you can see here: https://caniuse.com/#search=woff. The only exception is Opera Mini, but Opera Mini doesn’t support any other font format, so you can ignore it. Who uses it with BC anyway?

Once you’ve included the *.woff files, you need to declare them in your control add-in. For example, like this:



Yes, they are declared as images, and they are not images, but nobody cares. The AL compiler doesn’t care, the runtime doesn’t care. If you don’t declare these files, they won’t be unpacked in the target directory on the web server, so you must declare them and Images is the only property that allows you to do it.

The next step is to include stylesheets. If you are using a web font only to be able to support a custom typeface, then a @font-face declaration should be enough. For Font Awesome, these declarations can be found in regular.css and solid.css files. However, if you want to also use icons, you must also include the fontawesome.css file. You may use the minified version of the icon definition stylesheet, the go ahead with fontawesome.min.css, but don’t use the regular.min.css or solid.min.css files because you’ll need to edit them and it will be far easier to do so with their non-minified versions.

Once you included those files in your project, you need to declare them in your control add-in too. Something like this:



It’s edit time now. You need to open your regular.css and solid.css files and change the @font-face definitions. Do the following:
  1. Remove the first src declaration line (the one that declares the .eot version of the font)
  2. On the second src declaration line, remove all declarations except the .woff declaration
  3. Change the url of the font to reflect the relative path to the .woff file from the path of the stylesheet file
The end result in my demo looks like this:



And that’s it. You can now use Font Awesome from within your control add-in the same way you would use it in any other web project. Here’s a screenshot from my demo:



You can find the entire Demo project repository on my GitHub: https://github.com/vjekob/fontawesomebc

Good luck

Read this post at its original location at http://vjeko.com/using-font-awesome-...ntrol-add-ins/, or visit the original blog at http://vjeko.com. 5e33c5f6cb90c441bd1f23d5b9eeca34The post Using Font Awesome icons in control add-ins appeared first on Vjeko.com.




Источник: http://vjeko.com/using-font-awesome-...ntrol-add-ins/
__________________
Расскажите о новых и интересных блогах по Microsoft Dynamics, напишите личное сообщение администратору.
 

Похожие темы
Тема Автор Раздел Ответов Посл. сообщение
german_nav_developer: Dynamics NAV 2013 R2 multi-tenancy – Viele Mieterinnen ohne Stress und Neid Blog bot Dynamics CRM: Blogs 0 30.12.2013 19:00
Platform updates overview - 3.70.B - NAV2009 R2 Blog bot Dynamics CRM: Blogs 0 07.02.2011 22:06
Nav developer: Table Information including Index information (Usage, Blocks and Reads) Blog bot Dynamics CRM: Blogs 0 25.08.2009 19:34
NAV Sustained Engineering Team Blog: Index Usage Query Blog bot Dynamics CRM: Blogs 0 26.02.2008 12:29
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход

Рейтинг@Mail.ru
Часовой пояс GMT +3, время: 01:09.
Powered by vBulletin® v3.8.5. Перевод: zCarot
Контактная информация, Реклама.