How can I use custom web fonts in django cms icons - python-3.x

Question

My question is how does the /admin/djangocms_icon/includes/assets.html file look like? Can someone give a sample supposing I am using font awesome 5? Below are the configuration settings that I followed on Github.
Configuration
This addon provides a default template for all instances. You can provide
additional template choices by adding a DJANGOCMS_ICON_TEMPLATES
setting::
DJANGOCMS_ICON_TEMPLATES = [
('svg', 'SVG template'),
]
Web Font Icons
##############
The django CMS Icon plugin ships with Font Awesome 4 as default. This can
be changed by overriding the following setting::
DJANGOCMS_ICON_SETS = [
('fontawesome4', 'fa', 'Font Awesome 4'),
]
To use Font Awesome 5 in the above example; see the options below from the DJANGOCMS_ICON_SETSlisted.
In addition you need to load the resources for your fonts in /admin/djangocms_icon/includes/assets.html. Add this file to your project
in order for the icon picker to pick up your custom icons in the admin.
The icon picker supports numerous font libraries <http://victor-valencia.github.io/bootstrap-iconpicker/>
out of the box. You can also add multiple font sets like this::
DJANGOCMS_ICON_SETS = [
('elusiveicon', 'el', 'Elusive Icons'),
('flagicon', 'flag-icon', 'Flag Icons'),
('fontawesome4', 'fa', 'Font Awesome 4'),
('fontawesome5regular', 'far', 'Font Awesome 5 Regular'),
('fontawesome5solid', 'fas', 'Font Awesome 5 Solid'),
('fontawesome5brands', 'fab', 'Font Awesome 5 Brands'),
('fontawesome5light', 'fal', 'Font Awesome 5 Light',
'5.3.1_pro'),
('glyphicon', 'glyphicon', 'Glyphicons'),
('ionicon', 'ion', 'Ionicons Icons'),
('mapicon', 'map-icon', 'Map Icons'),
('materialdesign', 'zmdi', 'Material Design'),
('octicon', 'octicon', 'Octicons'),
('typicon', 'typcn', 'Typicons'),
('weathericon', 'wi', 'Weather Icons'),
]

Answer 1

I just had to figure this out myself. It depends on whether you're trying to include a preconfigured font or your own.
Including preconfigured fonts
There is an example of an assets.html provided in the official repository at djangocms_icon/templates/admin/djangocms_icon/includes/assets.html and it's in fact linking to Font Awesome 5 (5.3.1 specifically):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
In order to include another font:
Copy the assets.html file into your templates folder at templates/admin/djangocms_icon/includes/assets.html (it overrides the template's default),
Add another <link> referring to your (external or local) font(s) of choice,
Add the references in your settings.py's DJANGOCMS_ICON_SETS by copying the respective element(s) from the docs.
Including custom fonts
For custom fonts, it's a tad more complicated. In my case, I only had a single .ttf file with custom icons, no CSS. In this case, the assets.html looks like this:
{% load static %}
<link rel="stylesheet" href="{% static 'css/icons/my_icons.css' %}">
In my_icons.css, include the font with an #font-face-rule and add a general myicon class plus individual classes for each of the icons:
#font-face {
font-family: "My Icons";
font-weight: normal;
font-style: normal;
src: url("../../fonts/MyIcons.ttf") format("truetype");
}
.myicon {
font-family:"My Icons";
font-style: normal;
font-size: inherit;
}
.myicon-A:before {
content:"A";
}
.myicon-B:before {
content:"B";
}
.myicon-C:before {
content:"C";
}
...
Next, put a JSON file at static/js/my_icons.js (or wherever you want) with a list of all the icon classes:
{
"iconClass": "myicon",
"icons": ["myicon-A",
"myicon-B",
"myicon-C",
"myicon-D",
...
]
}
(To generate all possible symbols, I opened the font in MacOS's font manager, copied all of the glyphs with cmd-A/cmd-C - they are really just letters - and used that to generate the rules with a short Python script.)
Finally, in your settings.py, you load the JSON and set up the reference to your custom font:
with open('path/to/static/js/my_icons.js')) as iconfile:
MY_ICON_SET = iconfile.read()
DJANGOCMS_ICON_SETS = [
(MY_ICON_SET, # = the content of the JSON file
'myicon', # = the css class
'My Icons' # = the label in the admin interface
),
]
That should be it. Don't forget to include your custom font in your website as well (e.g. in the header of your base.html template) for the icons to show up in the content as well.