diff --git a/CHANGES.rst b/CHANGES.rst index 9e02600..39a7314 100644 --- a/CHANGES.rst +++ b/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 ----- diff --git a/docs/basic.rst b/docs/basic.rst index 7e9224e..05e80af 100644 --- a/docs/basic.rst +++ b/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 `_ 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 | +---------------------------+--------------------------------+--------------------------------------------------------------------+ diff --git a/docs/macros.rst b/docs/macros.rst index 83bee9b..d041b3f 100644 --- a/docs/macros.rst +++ b/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 `_. 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 `_. + :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``). diff --git a/examples/README.rst b/examples/README.rst index 27d0ee4..bc5c72c 100644 --- a/examples/README.rst +++ b/examples/README.rst @@ -31,10 +31,11 @@ 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: @@ -42,5 +43,5 @@ with: .. code-block:: bash - $ python3 update-icons.py + $ python3 update_icons.py diff --git a/examples/bootstrap4/app.py b/examples/bootstrap4/app.py index 2a3bbd5..418c90c 100644 --- a/examples/bootstrap4/app.py +++ b/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) diff --git a/examples/bootstrap4/templates/base.html b/examples/bootstrap4/templates/base.html index ca88b84..1cf106a 100644 --- a/examples/bootstrap4/templates/base.html +++ b/examples/bootstrap4/templates/base.html @@ -8,6 +8,7 @@ Bootstrap-Flask Demo Application {{ bootstrap.load_css() }} + {{ bootstrap.load_icon_font_css() }}