Font Awesome is missing

[dolfinus]

Hello.

I've installed airflow-code-editor 3.3.1 on Airflow 1.10.14. Extension works great, but I don't see any icon:

According to template: https://github.com/andreax79/airflow-code-editor/blob/ffa14b4fbb10257bb9ec1efb77d0e376df166a96/airflow_code_editor/templates/index_body.html#L81-L85 you're using icons from Font Awesome pack.

But Airflow v1 is using glyphicons: https://github.com/apache/airflow/blob/4aec433e48dcc66c9c7b74947c499260ab6be9e9/airflow/www/static/bootstrap-theme.css#L2573-L2606

Airflow v2 is using Material icons: https://github.com/apache/airflow/blob/fdea6226742d36eea2a7e0ef7e075f7746291561/airflow/www/static/css/material-icons.css#L20-L27

And also I don't see this font in static dir either: https://github.com/andreax79/airflow-code-editor/blob/ffa14b4fbb10257bb9ec1efb77d0e376df166a96/airflow_code_editor/templates/index_head.html

How is that possible that there are no mentions of Font Awesome usage in both Airflow and aifrlow-code-editor, but icons are present in the README file? Could you please add it to the static files folder?

[andreax79]

Hi. The following line is present in the Airflow (both v1&v2) html pages:

And the first lines of /static/appbuilder/css/font-awesome.min.css are:

• Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
• License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) I think font-awesome is installed as a dependencies of flask_appbuilder:

lib/python3.8/site-packages/flask_appbuilder/static/appbuilder/css/font-awesome.min.css

[dolfinus]

Thank you, I was not aware about flask-appbuilder package.

The following line is present in the Airflow (both v1&v2) html pages:

This is true for Airflow v2:

1. The base html template is appbuilder/baselayout: https://github.com/apache/airflow/blob/a17db7883044889b2b2001cefc41a8960359a23f/airflow/www/templates/airflow/main.html#L20
2. This base template includes Font Awesome css: https://github.com/dpgaspar/Flask-AppBuilder/blob/v1.12.0/flask_appbuilder/templates/appbuilder/init.html#L20

This is also true for Airflow v1 with RBAC enabled:

1. RBAC implementation was based on flask-appbuilder
2. It is using the same appbuilder/baselayout template as base: https://github.com/apache/airflow/blob/1.10.14/airflow/www_rbac/templates/airflow/master.html#L19

But things are different for Airflow v1 without RBAC:

1. Non-RBAC interface is based on flask-admin instead of flask-appbuilder.
2. This implementation has its own set of templates with admin/base as base: https://github.com/apache/airflow/blob/1.10.14/airflow/www/templates/admin/master.html#L20
3. Flask-Admin template does not include Font Awesome css: https://github.com/flask-admin/flask-admin/blob/1.5.4/flask_admin/templates/bootstrap3/admin/base.html#L15

My proposal is to add this line:

{% block head_css %}
<link href="{{url_for('appbuilder.static',filename='css/font-awesome.min.css')}}" rel="stylesheet">
{% endblock %}

into the template which is used only on Airflow v1 without RBAC: https://github.com/andreax79/airflow-code-editor/blob/ffa14b4fbb10257bb9ec1efb77d0e376df166a96/airflow_code_editor/templates/index_admin.html#L1

[andreax79]

I wasn't even aware that Airflow v1 without RBAC does not include Font Awesome. I released a new version 3.3.2 with your fix. Please check if it resolve your problem. Thanks!

[dolfinus]

I've checked this version and still no icons, but now because of wrong css file url: https://github.com/andreax79/airflow-code-editor/blob/9c722693c5eaf6253fe4f6183aa23b828ca9a9a2/airflow_code_editor/templates/index_admin.html#L6

should be:

code_editor/css/font-awesome.css

[dolfinus]

I've fixed path on my local instance but instead of icons I see just empty squares. This is because the style itself is importing font files like this one below but they does not present in the package:

../fonts/fontawesome-webfont.eot?v=4.7.0

[andreax79]

I added the missing files. Please check if now it works.

[dolfinus]

Still receiving 404 error while downloading font files:

This is because they are not included into a package file: https://files.pythonhosted.org/packages/be/e7/0b61f86af6c25d7c0d45bed7cf97ebf21975edf2c1aeb945d82ba75ab3c7/airflow_code_editor-3.3.3-py2.py3-none-any.whl

Please add font files extensions to this list: https://github.com/andreax79/airflow-code-editor/blob/fed557282c3a0819e293a7e4e9b7f5e87a4185f5/setup.py#L27 Or see #15 there I've fixed this issue.

[andreax79]

Thanks for the fix, merged.

[dolfinus]

It's working now, thanks!