Support for Font Awesome 5 Pro

[antwertinger]

I would like to use Font Awesome 5 Pro. I saw that in Bootstrap-Iconpicker it is possible to specify the version of the iconset to be used e.g data-iconset-version="5.3.1_pro" I could not find a way to set the version in this plugin. Could you add this possibility?

[FinalAngel]

Hello @antwertinger , there's no option to set the version number in the options of the bootstrap-iconpicker.

We cannot include the pro versions of fontawesome directly into the open-source project so you would have to add the iconset as "custom" and adapt the admin file as listed in our README.

[antwertinger]

Hello @FinalAngel, in the bootstrap-iconpicker documentation you can set the version explicitly.

Add data-iconset-version="" to idicates the iconset version. Default: data-iconset="lastest"

The Icon dataset already includes the pro version. The only problem is, that i cannot set the version to be used in the settings.py like this. DJANGOCMS_ICON_SETS = [ ('fontawesome5', 'fa', 'Font Awesome'), ('fontawesome5', 'fa', 'Font Awesome Pro', '5.3.1_pro'), ]

[FinalAngel]

@antwertinger thanks I oversaw that setting. Currently this is not integrated. I'd be happy to review a PR adding such functionality :)

[antwertinger]

@FinalAngel I will try to add the functionality. Can it be that the plugin isn't working anymore. I started a new aldryn project and installed the djangomcms icon plugin. There are no icons loaded. Can you confirm that?

[ochagnon]

There are no icons loaded.

I experience the exact same problem myself, I didn't even customized it. it's a default install

[FinalAngel]

I can confirm the same behaviour, investigating @antwertinger @ochagnon

[FinalAngel]

@ochagnon @antwertinger does the following PR fix the issue for you? https://github.com/divio/djangocms-icon/pull/16

On Divio Cloud it is 1.2.1.0 (alpha branch), but you will need to remove the added files in your project first to get the latest (or test with a clean project)

[antwertinger]

@FinalAngel thanks for the PR. Now it works fine.

One more thing i noticed, If you select an icon, it is not displayed in the ckeditor. I found out that one of the problems is because of an empty i tag. Ckeditor removes all empty tags. I see in your explorer demo template that there are some ckeditor settings for not removing empty tags. But this ist not documented in the djangocms-icon plugin. The Second problem is that the selected css font library is not loaded in the ckeditor. Would it not be nice if everything works out of the box after the djangocms-icon "installation", or at least the documentation should be expanded, to get the icon plugin working.

[FinalAngel]

@antwertinger I agree that it is not straight forward regarding the tag removal. However that documentation needs to be on CKEditor / djangocms-text-ckeditor. I'll try to add a readme entry about the behaviour.

[FinalAngel]

If you want to show the correct css in CKEditor you need to adapt the settings of the addon on divio cloud:

https://github.com/divio/djangocms-text-ckeditor/blob/175a1a444de8ca1ba4742196cb83150d45b5c505/aldryn_config.py#L36

[antwertinger]

okay thank you, everytime saving the list of css files in the divio cloud ckeditor settings a new dimension is added to the list.

'/static/css/base.css', 'https://use.fontawesome.com/releases/v5.3.1/css/all.css' ['["'/static/css/base.css\'", '"https://use.fontawesome.com/releases/v5.3.1/css/all.css"]'] ['["[\'/static/css/base.css\'"', '"\'https://use.fontawesome.com/releases/v5.3.1/css/all.css\']"]']

[antwertinger]

@ochagnon @antwertinger does the following PR fix the issue for you?

16

On Divio Cloud it is 1.2.1.0 (alpha branch), but you will need to remove the added files in your project first to get the latest (or test with a clean project)

it does not work In my existing project after upgrading to the new alpha version. Which files must be deleted exactly?

[FinalAngel]

@antwertinger all the files that would be present in: https://github.com/divio/djangocms-icon/tree/master/djangocms_icon/

Such as static/, templates/ from djangocms-icon

[antwertinger]

@FinalAngel I removed all files and afterwards installed the icon plugin again, but it doesn't work for an existing cloud project. I compared the files with your PR and everything is identically. You can test it with my Divio cloud project "4EB WEBSITE".

[FinalAngel]

@antwertinger I'll try to investigate tomorrow

[FinalAngel]

I tested it locally, you need to remove all the files @antwertinger , in your case:

• templates/djangocms_icon
• templates/admin/djangocms_icon
• static/djangocms_icon

after that it worked.

[ochagnon]

does the following PR fix the issue for you?

somewhat, some icon don't display.

the left icon html is

<i class="fa fa-clock-o circle-icon fa-3x text-blue mt-3 mb-3" aria-hidden="true"  style="background:#e9e9e9"></i>

not sure what i'm doing wrong...

 

[ochagnon]

I know why... I'm using fa5 but this wasn't set:

DJANGOCMS_ICON_SETS = [
    ('fontawesome5', 'fa', 'Font Awesome'),
]

Since I set it, no icons work anymore

I uninstall the package before, made sure there was nothing djangocms_icon in my virtualenv and my project, reinstalled again, collectstatic and I get this:

[antwertinger]

@ochagnon have you tried to install the Pull request #16 from @FinalAngel? If you use Divio Cloud there is an alpha version available for this issue.

Have you add the following code in your settings.py to display the icons in the ckeditor

CKEDITOR_SETTINGS = {
    'stylesSet': 'default:/static/js/addons/ckeditor.wysiwyg.js',
    'contentsCss': [
        'https://use.fontawesome.com/releases/v5.3.1/css/all.css',
    ],
}

Have you added the asset.html file to your templates? templates/admin/djangocms_icon/includes/assets.html With the following content?

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

[antwertinger]

@ochagnon your clock icon on the frontend don't have a bootstrap 5 class e.g. fas, far or fal

html<i class="fa fa-clock-o circle-icon fa-3x text-blue mt-3 mb-3" aria-hidden="true" style="background:#e9e9e9"></i>

if you use the solid style <i class="fas fa-clock"></i> the regular style <i class="far fa-clock"></i> or the light style <i class="fal fa-clock"></i>

[ochagnon]

I switched my requirements.txt to

-e git://github.com/divio/djangocms-icon.git@81a1a6abbdbeaec1556b86079b8b3895cf1b3565#egg=djangocms-icon

settings:

DJANGOCMS_ICON_SETS = [
    ('fontawesome5', 'fa', 'Font Awesome'),
]

CKEDITOR_SETTINGS = {
    'stylesSet': 'default:/static/js/ckeditor.js',
    'contentsCss': ['https://use.fontawesome.com/releases/v5.7.2/css/all.css']
}

my ckeditor.js file is the same as the original, but the following changed:

CKEDITOR.dtd.$removeEmpty.span = 1;

and my base.html

    {% addtoblock "css" %}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    {% endaddtoblock %}

and run:

pip uninstall djangocms-icon
pip install -r requirements.txt
rm -rf static
./manage.py collectstatic

now the icon render correctly, but in the admin i still have this

[FinalAngel]

@ochagnon you also need to make sure fontawesome5 is loaded in the widget: https://github.com/divio/djangocms-icon/blob/master/djangocms_icon/templates/admin/djangocms_icon/includes/assets.html#L1

[FinalAngel]

The PR has been merged into master

[antwertinger]

@ochagnon you load the wrong fontawesome 5 version "5.7.2". The latest supported Version by the plugin is "5.3.1"

your asset.html file should look like this

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

settings.py

CKEDITOR_SETTINGS = {
    'stylesSet': 'default:/static/js/ckeditor.js',
    'contentsCss': ['https://use.fontawesome.com/releases/v5.3.1/css/all.css']
}

Ensure that in your ckeditor.js file the remove empty options are set, otherwise the editor removes all empty span and i tags

CKEDITOR.dtd.$removeEmpty.span = 0;
CKEDITOR.dtd.$removeEmpty.i = 0;

[FinalAngel]

This has now been released :)

Thank you @antwertinger for the contribution.