Skip to content

Commit 396e89c

Browse files
PanderMusubiPanderMusubi
committed
support font icons
1 parent ac1f3c0 commit 396e89c

File tree

18 files changed

+153
-22
lines changed

18 files changed

+153
-22
lines changed

‎docs/basic.rst‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ If you want to apply a strict Content Security Policy (CSP), you can pass ``nonc
6767
E.g. if using `Talisman
6868
<https://github.com/wntrblm/flask-talisman>`_ it can be called with ``bootstrap.load_js(nonce=csp_nonce())``.
6969

70+
In order to use icon font, there is an additional helper called ``bootstrap.load_icon_font_css()``.
71+
This is used only by ``render_icon(..., font=True)``. See its also the documentation for that marco.
72+
7073
Starter template
7174
----------------
7275

‎docs/macros.rst‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -607,7 +607,9 @@ By default, it will enable the CSRF token check for all the POST requests, read
607607
render_icon()
608608
-------------
609609

610-
Render a Bootstrap icon.
610+
Render a Bootstrap icon. This is either an SVG with a ``use`` element which refers to a locally hosted SVG sprite with an fragment identifier.
611+
Note that serving the SVG sprite across a domain has an `issue with Chrome <https://issues.chromium.org/issues/41164645>`_.
612+
Or it is possible to have a font icon rendered. This does support``BOOTSTRAP_SERVE_LOCAL`` but requires ``bootstrap.load_icon_font_css()`` in the template header.
611613

612614
Example
613615
~~~~~~~
@@ -621,13 +623,14 @@ Example
621623
API
622624
~~~~
623625

624-
.. py:function:: render_icon(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR, title=None, desc=None)
626+
.. py:function:: render_icon(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR, title=None, desc=None, font=False)
625627
626628
:param name: The name of icon, you can find all available names at `Bootstrap Icon <https://icons.getbootstrap.com/>`_.
627629
:param size: The size of icon, you can pass any vaild size value (e.g. ``32``/``'32px'``, ``1.5em``, etc.), default to
628630
use configuration ``BOOTSTRAP_ICON_SIZE`` (default value is `'1em'`).
629631
:param color: The color of icon, follow the context with ``currentColor`` if not set. Accept values are Bootstrap style name
630632
(one of ``['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'muted']``) or any valid color
631633
string (e.g. ``'red'``, ``'#ddd'`` or ``'(250, 250, 250)'``), default to use configuration ``BOOTSTRAP_ICON_COLOR`` (default value is ``None``).
632-
:param title: The title of the icon for accessibility support.
633-
:param desc: The description of the icon for accessibility support.
634+
:param title: The title of the icon for accessibility support. This is not supported for ``font=True``.
635+
:param desc: The description of the icon for accessibility support. This is not supported for ``font=True``.
636+
:param font: Default to generate ``<svg></svg>``, if set to ``True``, it will generate ``<i></i>`` which uses icon font.

‎examples/bootstrap4/templates/base.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<title>Bootstrap-Flask Demo Application</title>
99
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
1010
{{ bootstrap.load_css() }}
11+
{{ bootstrap.load_icon_font_css() }}
1112
<style>
1213
pre {
1314
background: #ddd;

‎examples/bootstrap4/templates/icon.html‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,39 @@
22
{% from 'bootstrap4/utils.html' import render_icon %}
33

44
{% block content %}
5-
<h2>Icon</h2>
5+
<h2>SVG icon</h2>
66
<pre>{% raw %}{{ render_icon('heart') }}{% endraw %}</pre>
77
Output: {{ render_icon('heart') }}
88

9-
<h2>Icon with custom size</h2>
9+
<h2>SVG icon with custom size</h2>
1010
<pre>{% raw %}{{ render_icon('heart', 32) }}{% endraw %}</pre>
1111
Output: {{ render_icon('heart', 32) }}
1212

13-
<h2>Icon with custom size and Bootstrap color</h2>
13+
<h2>SVG icon with custom size and Bootstrap color</h2>
1414
<pre>{% raw %}{{ render_icon('heart', 25, 'primary') }}{% endraw %}</pre>
1515
Output: {{ render_icon('heart', 25, 'primary') }}
1616

17-
<h2>Icon with custom size and custom color</h2>
17+
<h2>SVG icon with custom size and custom color</h2>
1818
<pre>{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}</pre>
1919
Output: {{ render_icon('heart', '2em', 'red') }}
2020

21-
<h2>Icon with title and descr</h2>
21+
<h2>SVG icon with title and descr</h2>
2222
<pre>{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}</pre>
2323
Output: {{ render_icon('heart', title='Heart', desc='A heart.') }}
2424

25-
<h2>Button example</h2>
25+
<h2>Buttons with SVG icon</h2>
2626
<a class="btn btn-primary text-white">Download {{ render_icon('arrow-down-circle') }}</a>
2727
<a class="btn btn-success text-white">Bookmark {{ render_icon('bookmark-star') }}</a>
28-
{% endblock %}
28+
29+
<h2>Font icon with custom size and Bootstrap color</h2>
30+
<pre>{% raw %}{{ render_icon('heart', '25px', 'primary', font=True) }}{% endraw %}</pre>
31+
Output: {{ render_icon('heart', '25px', 'primary', font=True) }}
32+
33+
<h2>Font icon with custom size and custom color</h2>
34+
<pre>{% raw %}{{ render_icon('heart', '2em', 'red', font=True) }}{% endraw %}</pre>
35+
Output: {{ render_icon('heart', '2em', 'red', font=True) }}
36+
37+
<h2>Buttons with font icon</h2>
38+
<a class="btn btn-primary text-white">Download {{ render_icon('arrow-down-circle', font=True) }}</a>
39+
<a class="btn btn-success text-white">Bookmark {{ render_icon('bookmark-star', font=True) }}</a>
40+
{% endblock %}

‎examples/bootstrap4/templates/icons.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16409,3 +16409,4 @@ <h2>Icons</h2>
1640916409
</ul>
1641016410
<p>This is a total of 2050 icons.</p>
1641116411
{% endblock %}
16412+

‎examples/bootstrap5/templates/base.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<title>Bootstrap-Flask Demo Application</title>
99
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
1010
{{ bootstrap.load_css() }}
11+
{{ bootstrap.load_icon_font_css() }}
1112
<style>
1213
pre {
1314
background: #ddd;

‎examples/bootstrap5/templates/icon.html‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,39 @@
22
{% from 'bootstrap5/utils.html' import render_icon %}
33

44
{% block content %}
5-
<h2>Icon</h2>
5+
<h2>SVG icon</h2>
66
<pre>{% raw %}{{ render_icon('heart') }}{% endraw %}</pre>
77
Output: {{ render_icon('heart') }}
88

9-
<h2>Icon with custom size</h2>
9+
<h2>SVG icon with custom size</h2>
1010
<pre>{% raw %}{{ render_icon('heart', 32) }}{% endraw %}</pre>
1111
Output: {{ render_icon('heart', 32) }}
1212

13-
<h2>Icon with custom size and Bootstrap color</h2>
13+
<h2>SVG icon with custom size and Bootstrap color</h2>
1414
<pre>{% raw %}{{ render_icon('heart', 25, 'primary') }}{% endraw %}</pre>
1515
Output: {{ render_icon('heart', 25, 'primary') }}
1616

17-
<h2>Icon with custom size and custom color</h2>
17+
<h2>SVG icon with custom size and custom color</h2>
1818
<pre>{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}</pre>
1919
Output: {{ render_icon('heart', '2em', 'red') }}
2020

21-
<h2>Icon with title and descr</h2>
21+
<h2>SVG icon with title and descr</h2>
2222
<pre>{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}</pre>
2323
Output: {{ render_icon('heart', title='Heart', desc='A heart.') }}
2424

25-
<h2>Button example</h2>
25+
<h2>Buttons with SVG icon</h2>
2626
<a class="btn btn-primary text-white">Download {{ render_icon('arrow-down-circle') }}</a>
2727
<a class="btn btn-success text-white">Bookmark {{ render_icon('bookmark-star') }}</a>
28-
{% endblock %}
28+
29+
<h2>Font icon with custom size and Bootstrap color</h2>
30+
<pre>{% raw %}{{ render_icon('heart', '25px', 'primary', font=True) }}{% endraw %}</pre>
31+
Output: {{ render_icon('heart', '25px', 'primary', font=True) }}
32+
33+
<h2>Font icon with custom size and custom color</h2>
34+
<pre>{% raw %}{{ render_icon('heart', '2em', 'red', font=True) }}{% endraw %}</pre>
35+
Output: {{ render_icon('heart', '2em', 'red', font=True) }}
36+
37+
<h2>Buttons with font icon</h2>
38+
<a class="btn btn-primary text-white">Download {{ render_icon('arrow-down-circle', font=True) }}</a>
39+
<a class="btn btn-success text-white">Bookmark {{ render_icon('bookmark-star', font=True) }}</a>
40+
{% endblock %}

‎examples/bootstrap5/templates/icons.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16409,3 +16409,4 @@ <h2>Icons</h2>
1640916409
</ul>
1641016410
<p>This is a total of 2050 icons.</p>
1641116411
{% endblock %}
16412+

‎examples/update-icons.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ def generate(version):
4040
number += 1
4141
file.write('</ul>\n')
4242
file.write(f'<p>This is a total of {number} icons.</p>\n')
43-
file.write('{% endblock %}\n')
43+
file.write('{% endblock %}\n\n')
4444
print(f'For Bootstrap{version}, a total of {number} icons are supported.')
4545

4646
for value in (4, 5):

‎flask_bootstrap/__init__.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ class _Bootstrap:
4040
bootstrap_version = None
4141
jquery_version = None
4242
popper_version = None
43+
icons_version = None
4344
bootstrap_css_integrity = None
4445
bootstrap_js_integrity = None
4546
jquery_integrity = None
@@ -122,6 +123,19 @@ def load_css(self, version=None, bootstrap_sri=None, bootswatch_theme=None):
122123
css = f'<link rel="stylesheet" href="{boostrap_url}">'
123124
return Markup(css)
124125

126+
def load_icon_font_css(self):
127+
"""Load Bootstrap's css icon font resource.
128+
129+
.. versionadded:: 2.4.2
130+
"""
131+
serve_local = current_app.config['BOOTSTRAP_SERVE_LOCAL']
132+
if serve_local:
133+
icons_url = url_for('bootstrap.static', filename='font/bootstrap-icons.min.css')
134+
else:
135+
icons_url = f'{CDN_BASE}/bootstrap-icons@{self.icons_version}/font/bootstrap-icons.min.css'
136+
css = f'<link rel="stylesheet" href="{icons_url}">'
137+
return Markup(css)
138+
125139
def _get_js_script(self, version, name, sri, nonce):
126140
"""Get <script> tag for JavaScript resources."""
127141
serve_local = current_app.config['BOOTSTRAP_SERVE_LOCAL']
@@ -227,6 +241,7 @@ def create_app():
227241
bootstrap_version = '4.6.1'
228242
jquery_version = '3.5.1'
229243
popper_version = '1.16.1'
244+
icons_version = '1.11.3'
230245
bootstrap_css_integrity = 'sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn'
231246
bootstrap_js_integrity = 'sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2'
232247
jquery_integrity = 'sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0='
@@ -262,6 +277,7 @@ def create_app():
262277
"""
263278
bootstrap_version = '5.3.2'
264279
popper_version = '2.11.8'
280+
icons_version = '1.11.3'
265281
bootstrap_css_integrity = 'sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN'
266282
bootstrap_js_integrity = 'sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+'
267283
popper_integrity = 'sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r'

0 commit comments

Comments
 (0)