offline icons and font icons

CHANGES.rst

@@ -1,9 +1,9 @@
 Changelog
 =========
 
+- Added support for offline icons and font icons.
 - Upgrade to Bootstrap Icons 1.11.3.
 
-
 2.4.1
 -----
 

docs/basic.rst

@@ -67,6 +67,8 @@ If you want to apply a strict Content Security Policy (CSP), you can pass ``nonc
 E.g. if using `Talisman
 <https://github.com/wntrblm/flask-talisman>`_ it can be called with ``bootstrap.load_js(nonce=csp_nonce())``.
 
+In order to use icon font, there is an additional helper called ``bootstrap.load_icon_font_css()``. User this only when calling ``render_icon_font()``. For  more information, see the documentation for that marco.
+
 Starter template
 ----------------
 
@@ -133,6 +135,8 @@ Macros
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
 | render_icon()             | bootstrap4/utils.html          | Render a Bootstrap icon                                            |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
+| render_icon_font()        | bootstrap4/utils.html          | Render a Bootstrap font icon                                       |
++---------------------------+--------------------------------+--------------------------------------------------------------------+
 | render_table()            | bootstrap4/table.html          | Render a table with given data                                     |
 +---------------------------+--------------------------------+--------------------------------------------------------------------+
 

docs/macros.rst

@@ -607,7 +607,7 @@ By default, it will enable the CSRF token check for all the POST requests, read
 render_icon()
 -------------
 
-Render a Bootstrap icon.
+Render a Bootstrap icon. This an SVG with a ``use`` element which refers to a locally hosted SVG sprite with an fragment identifier. Note that serving the SVG sprite across a domain has an `issue with Chrome <https://issues.chromium.org/issues/41164645>`_.
 
 Example
 ~~~~~~~
@@ -631,3 +631,30 @@ API
                 string (e.g. ``'red'``, ``'#ddd'`` or ``'(250, 250, 250)'``), default to use configuration ``BOOTSTRAP_ICON_COLOR`` (default value is ``None``).
     :param title: The title of the icon for accessibility support.
     :param desc: The description of the icon for accessibility support.
+
+
+render_icon_font()
+------------------
+
+Render a Bootstrap icon font. This has less functionality than ``render_icon()``, but works with serving the SVG sprite across a domain by setting ``BOOTSTRAP_SERVE_LOCAL`` to ``True``.
+
+Example
+~~~~~~~
+
+.. code-block:: jinja
+
+    {% from 'bootstrap4/utils.html' import render_icon_font %}
+
+    {{ render_icon_font('heart') }}
+
+API
+~~~~
+
+.. py:function:: render_icon_font(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR)
+
+    :param name: The name of icon, you can find all available names at `Bootstrap Icon <https://icons.getbootstrap.com/>`_.
+    :param size: The size of icon, you can pass any vaild size value (e.g. ``32``/``'32px'``, ``1.5em``, etc.), default to
+                use configuration ``BOOTSTRAP_ICON_SIZE`` (default value is `'1em'`).
+    :param color: The color of icon, follow the context with ``currentColor`` if not set. Accept values are Bootstrap style name
+                (one of ``['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'muted']``) or any valid color
+                string (e.g. ``'red'``, ``'#ddd'`` or ``'(250, 250, 250)'``), default to use configuration ``BOOTSTRAP_ICON_COLOR`` (default value is ``None``).

examples/README.rst

@@ -31,16 +31,17 @@ Live demos for the example application: https://bootstrap-flask-example.azureweb
 Overview of icons
 -----------------
 
-The example applications contain a page called icons which gives an overview
-of all icons supported by this version of Bootstrap-Flask. This overview can be
-used for testing purposes but is also offline documentation on the icons
-available.
+The example applications contain pages called icons and icons_font which gives
+an overview of all icons, respectively from SVG file and CSS font file,
+supported by this version of Bootstrap-Flask. This overview can be used for
+testing purposes but is also offline documentation on the icons available for
+development purposes.
 
 When Bootstrap-Flask updates the icon file, the overview page can be upgraded
 with:
 
 
 .. code-block:: bash
 
-    $ python3 update-icons.py
+    $ python3 update_icons.py
 

examples/bootstrap4/app.py

@@ -14,6 +14,7 @@
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///:memory:'
 
+app.config['BOOTSTRAP_SERVE_LOCAL'] = True
 # set default button sytle and size, will be overwritten by macro parameters
 app.config['BOOTSTRAP_BTN_STYLE'] = 'primary'
 app.config['BOOTSTRAP_BTN_SIZE'] = 'sm'
@@ -293,5 +294,10 @@ def test_icons():
     return render_template('icons.html')
 
 
+@app.route('/icons_font')
+def test_icons_font():
+    return render_template('icons_font.html')
+
+
 if __name__ == '__main__':
     app.run(debug=True)

examples/bootstrap4/templates/base.html

@@ -8,6 +8,7 @@
     <title>Bootstrap-Flask Demo Application</title>
     <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
     {{ bootstrap.load_css() }}
+    {{ bootstrap.load_icon_font_css() }}
     <style>
         pre {
             background: #ddd;
@@ -38,6 +39,7 @@
                 {{ render_nav_item('test_table', 'Table') }}
                 {{ render_nav_item('test_icon', 'Icon') }}
                 {{ render_nav_item('test_icons', 'Icons') }}
+                {{ render_nav_item('test_icons_font', 'Icons Font') }}
                 <li class="nav-item"><a class="nav-link" href="https://bootstrap-flask.readthedocs.io/" target="_blank">Documentation</a></li>
                 <li class="nav-item"><a class="nav-link" href="https://getbootstrap.com/docs/4.6/getting-started/introduction/" target="_blank">Bootstrap Documentation</a></li>
                 <li class="nav-item"><a class="nav-link" href="https://github.com/greyli/bootstrap-flask" target="_blank">GitHub</a></li>

examples/bootstrap4/templates/icon.html

@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% from 'bootstrap4/utils.html' import render_icon %}
+{% from 'bootstrap4/utils.html' import render_icon, render_icon_font %}
 
 {% block content %}
 <h2>Icon</h2>
@@ -25,4 +25,15 @@ <h2>Icon with title and descr</h2>
 <h2>Button example</h2>
 <a class="btn btn-primary text-white">Download {{ render_icon('arrow-down-circle') }}</a>
 <a class="btn btn-success text-white">Bookmark {{ render_icon('bookmark-star') }}</a>
+
+<h2>Icon font examples</h2>
+<pre>{% raw %}{{ render_icon_font('heart', '32px') }}{% endraw %}</pre>
+Output: {{ render_icon_font('heart', '32px') }}
+<pre>{% raw %}{{ render_icon_font('heart', '25px', 'primary') }}{% endraw %}</pre>
+Output: {{ render_icon_font('heart', '25px', 'primary') }}
+<pre>{% raw %}{{ render_icon_font('heart', '2em', 'red') }}{% endraw %}</pre>
+Output: {{ render_icon_font('heart', '2em', 'red') }}
+<br>
+<a class="btn btn-primary text-white">Download {{ render_icon_font('arrow-down-circle') }}</a>
+<a class="btn btn-success text-white">Bookmark {{ render_icon_font('bookmark-star') }}</a>
 {% endblock %}

examples/bootstrap4/templates/icons.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 <h2>Icons</h2>
-<p>These are all the icons which are currently supported by Bootstrap-Flask.</p>
+<p>These are all SVG icons that are currently supported by Bootstrap-Flask.</p>
 <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/0-circle/">