Replace Glyphicons with Bootstrap icons

examples/auth/templates/admin/index.html

@@ -22,7 +22,7 @@ <h1>Flask-Admin example</h1>
             </p>
             {% endif %}
             <p>
-                <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+                <a class="btn btn-primary" href="/"><i class="bi bi-chevron-left"></i> Back</a>
             </p>
         </div>
     </div>

examples/auth/templates/my_master.html

@@ -4,7 +4,7 @@
 {% if current_user.is_authenticated %}
 <div class="navbar-text btn-group pull-right">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
-        <i class="glyphicon glyphicon-user"></i>
+        <i class="bi bi-person-fill"></i>
         {% if current_user.first_name -%}
         {{ current_user.first_name }}
         {% else -%}

examples/bootstrap4/main.py

@@ -12,6 +12,8 @@
 from flask_admin.contrib.sqla import ModelView
 from flask_admin.menu import MenuDivider
 from flask_admin.menu import MenuLink
+from flask_admin.model.template import EndpointLinkRowAction
+from flask_admin.model.template import LinkRowAction
 from flask_admin.theme import Bootstrap4Theme
 from flask_sqlalchemy import SQLAlchemy
 from sqlalchemy import Boolean
@@ -92,7 +94,14 @@ def __repr__(self):
         return self.name
 
 
-class UserAdmin(ModelView):
+class CustomView(ModelView):
+    column_extra_row_actions = [
+        LinkRowAction("bi bi-chat-quote", "/admin/page?id={row_id}"),
+        EndpointLinkRowAction("bi bi-cake-fill", ".index_view"),
+    ]
+
+
+class UserAdmin(CustomView):
     column_searchable_list = ("name",)
     column_filters = ("name", "email")
     can_export = True
@@ -201,6 +210,44 @@ class PageWithModalView(ModelView):
         MenuLink(name="External link", url="http://www.example.com/", category="Links")
     )
 
+    admin.add_link(
+        MenuLink(
+            name="Fontawesome",
+            url="http://www.example.com/",
+            category="Icons",
+            icon_type="fa",
+            icon_value="fa-home shadow",
+        )
+    )
+    admin.add_link(
+        MenuLink(
+            name="Bootstrap Icons",
+            url="http://www.example.com/",
+            category="Icons",
+            icon_type="bi",
+            icon_value="bi-bootstrap",
+        )
+    )
+    admin.add_link(
+        MenuLink(
+            name="image from /static",
+            url="http://www.example.com/",
+            category="Icons",
+            icon_type="image",
+            icon_value="h1.png",
+            class_name="shadow",
+        )
+    )
+    admin.add_link(
+        MenuLink(
+            name="image URL",
+            url="http://www.example.com/",
+            category="Icons",
+            icon_type="image-url",
+            icon_value="https://placehold.co/32?text=S",
+        )
+    )
+
     for t in all_themes:
         admin.add_link(
             MenuLink(

examples/csp_nonce/templates/admin/index.html

@@ -27,7 +27,7 @@ <h1>Flask-Admin Content-Security-Policy (CSP) example</h1>
             <p class="insecure-style">
                 But I don't have any styling applied because CSP is protecting me.
             </p>
-            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+            <a class="btn btn-primary" href="/"><i class="bi bi-chevron-left"></i> Back</a>
         </div>
     </div>
 </div>

examples/forms_files_images/templates/admin/index.html

@@ -14,7 +14,7 @@ <h1>Flask-Admin example</h1>
             <p>
                 It also demonstrates general file handling as well as the handling of image files specifically.
             </p>
-            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+            <a class="btn btn-primary" href="/"><i class="bi bi-chevron-left"></i> Back</a>
         </div>
     </div>
 </div>

examples/geo_alchemy/templates/admin/index.html

@@ -11,7 +11,7 @@ <h1>Flask-Admin example</h1>
             <p>
                 This example shows how to manage spatial information in a GIS database.
             </p>
-            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+            <a class="btn btn-primary" href="/"><i class="bi bi-chevron-left"></i> Back</a>
         </div>
     </div>
 </div>

examples/simple/templates/admin/index.html

@@ -15,7 +15,7 @@ <h1>Flask-Admin example</h1>
             <p>
                 By adding custom views to the admin interface, they become accessible through the <em>navbar</em> at the top.
             </p>
-            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> Back</a>
+            <a class="btn btn-primary" href="/"><i class="bi bi-chevron-left"></i> Back</a>
         </div>
     </div>
 </div>

examples/sqla/admin/templates/admin/index.html

@@ -14,7 +14,7 @@ <h1>Flask-Admin {{ _gettext('example') }}</h1>
             <p>
                 The views are generated automatically, but it is perfectly possible to customize them to suit your needs.
             </p>
-            <a class="btn btn-primary" href="/"><i class="glyphicon glyphicon-chevron-left"></i> {{ _gettext('Back') }}</a>
+            <a class="btn btn-primary" href="/"><i class="bi bi-chevron-left"></i> {{ _gettext('Back') }}</a>
         </div>
     </div>
 </div>

flask_admin/base.py

@@ -152,7 +152,7 @@ def index(self):
 
         admin.add_view(
             MyView(
-                name='My View', menu_icon_type='glyph', menu_icon_value='glyphicon-home'
+                name='My View', menu_icon_type='bi', menu_icon_value='bi-house'
             )
         )
     """
@@ -232,13 +232,14 @@ def __init__(
         :param menu_icon_type:
             Optional icon. Possible icon types:
 
-             - `flask_admin.consts.ICON_TYPE_GLYPH` - Bootstrap glyph icon
+             - `flask_admin.consts.ICON_TYPE_BOOTSTRAP` - Bootstrap icon
              - `flask_admin.consts.ICON_TYPE_FONT_AWESOME` - Font Awesome icon
              - `flask_admin.consts.ICON_TYPE_IMAGE` - Image relative to Flask static
                 directory
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
-            Icon glyph name or URL, depending on `menu_icon_type` setting
+            Icon name (Fontawesome, or Bootstrap) or URL, depending on
+            `menu_icon_type` setting
         """
         self.name = name
         self.category = category
@@ -581,7 +582,7 @@ def __init__(
             Base theme. Defaults to `Bootstrap4Theme()`.
         :param category_icon_classes:
             A dict of category names as keys and html classes as values to be added to
-            menu category icons. Example: {'Favorites': 'glyphicon glyphicon-star'}
+            menu category icons. Example: {'Favorites': 'bi bi-star-fill'}
         :param host:
             The host to register all admin views on. Mutually exclusive with `subdomain`
         :param csp_nonce_generator:

flask_admin/consts.py

@@ -1,6 +1,6 @@
-# bootstrap glyph icon
-ICON_TYPE_GLYPH = "glyph"
-# font awesome glyph icon
+# bootstrap icon
+ICON_TYPE_BOOTSTRAP = "bi"
+# fontawesome icon
 ICON_TYPE_FONT_AWESOME = "fa"
 # image relative to Flask static folder
 ICON_TYPE_IMAGE = "image"

flask_admin/contrib/mongoengine/view.py

@@ -274,14 +274,15 @@ def __init__(
         :param menu_icon_type:
             Optional icon. Possible icon types:
 
-             - `flask_admin.consts.ICON_TYPE_GLYPH` - Bootstrap glyph icon
+             - `flask_admin.consts.ICON_TYPE_BOOTSTRAP` - Bootstrap icon
              - `flask_admin.consts.ICON_TYPE_FONT_AWESOME` - Font Awesome icon
              - `flask_admin.consts.ICON_TYPE_IMAGE` - Image relative to
                                                       Flask static directory
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
 
         :param menu_icon_value:
-            Icon glyph name or URL, depending on `menu_icon_type` setting
+            Icon name (Fontawesome, or Bootstrap) or URL, depending on
+            `menu_icon_type` setting
         """
         self._search_fields: list[t.Any] = []
 

flask_admin/contrib/pymongo/view.py

@@ -97,13 +97,14 @@ def __init__(
         :param menu_icon_type:
             Optional icon. Possible icon types:
 
-             - `flask_admin.consts.ICON_TYPE_GLYPH` - Bootstrap glyph icon
+             - `flask_admin.consts.ICON_TYPE_BOOTSTRAP` - Bootstrap icon
              - `flask_admin.consts.ICON_TYPE_FONT_AWESOME` - Font Awesome icon
              - `flask_admin.consts.ICON_TYPE_IMAGE` - Image relative to Flask static
                 directory
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
-            Icon glyph name or URL, depending on `menu_icon_type` setting
+            Icon name (Fontawesome, or Bootstrap) or URL, depending on
+            `menu_icon_type` setting
         """
         self._search_fields = []
 

flask_admin/contrib/sqla/view.py

@@ -375,13 +375,14 @@ def __init__(
         :param menu_icon_type:
             Optional icon. Possible icon types:
 
-             - `flask_admin.consts.ICON_TYPE_GLYPH` - Bootstrap glyph icon
+             - `flask_admin.consts.ICON_TYPE_BOOTSTRAP` - Bootstrap icon
              - `flask_admin.consts.ICON_TYPE_FONT_AWESOME` - Font Awesome icon
              - `flask_admin.consts.ICON_TYPE_IMAGE` - Image relative to Flask static
                 directory
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
-            Icon glyph name or URL, depending on `menu_icon_type` setting
+            Icon name (Fontawesome, or Bootstrap) or URL, depending on
+            `menu_icon_type` setting
         """
         self.session = _warn_session_deprecation(session)
 

flask_admin/model/base.py

@@ -609,10 +609,10 @@ class MyModelView(BaseModelView):
             class MyModelView(BaseModelView):
                 column_extra_row_actions = [
                     LinkRowAction(
-                        'glyphicon glyphicon-off', 'http://direct.link/?id={row_id}'
+                        'bi bi-rocket-takeoff', 'http://direct.link/?id={row_id}'
                     ),
                     EndpointLinkRowAction(
-                        'glyphicon glyphicon-test', 'my_view.index_view'
+                        'bi bi-box-arrow-up-right', 'my_view.index_view'
                     )
                 ]
     """
@@ -931,13 +931,14 @@ def __init__(
         :param menu_icon_type:
             Optional icon. Possible icon types:
 
-             - `flask_admin.consts.ICON_TYPE_GLYPH` - Bootstrap glyph icon
+             - `flask_admin.consts.ICON_TYPE_BOOTSTRAP` - Bootstrap icon
              - `flask_admin.consts.ICON_TYPE_FONT_AWESOME` - Font Awesome icon
              - `flask_admin.consts.ICON_TYPE_IMAGE` - Image relative to Flask
                 static directory
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
-            Icon glyph name or URL, depending on `menu_icon_type` setting
+            Icon name (Fontawesome, or Bootstrap) or URL, depending on
+            `menu_icon_type` setting
         """
         self.model = model
         # If name not provided, it is model name

flask_admin/model/typefmt.py

@@ -36,13 +36,10 @@ def bool_formatter(view: T_MODEL_VIEW, value: t.Any, name: str) -> str:
     :param value:
         Value to check
     """
-    glyph = "ok-circle" if value else "minus-sign"
+    bootstrap = "bi-check-circle-fill" if value else "bi-dash-circle-fill"
     fa = "fa-check-circle" if value else "fa-minus-circle"
     label = f'{name}: {"true" if value else "false"}'
-    return Markup(
-        f'<span class="fa {fa} glyphicon glyphicon-{glyph} '
-        f'icon-{glyph}" title="{label}"></span>'
-    )
+    return Markup(f'<span class="fa {fa} bi bi-{bootstrap} title="{label}"></span>')
 
 
 def list_formatter(view: T_MODEL_VIEW, values: t.Iterable[t.Any], name: str) -> str:

flask_admin/templates/bootstrap4/admin/base.html

@@ -19,6 +19,7 @@
         {% endif %}
         <link href="{{ admin_static.url(filename='admin/css/bootstrap4/admin.css', v='1.1.1') }}" rel="stylesheet" {{ admin_csp_nonce_attribute }}>
         <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/css/font-awesome.min.css', v='4.7.0') }}" rel="stylesheet" {{ admin_csp_nonce_attribute }}>
+        <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/css/bootstrap-icons.min.css', v='1.13.1') }}" rel="stylesheet" {{ admin_csp_nonce_attribute }}>
         {% if admin_view.extra_css %}
           {% for css_url in admin_view.extra_css %}
             <link href="{{ css_url }}" rel="stylesheet" {{ admin_csp_nonce_attribute }}>

flask_admin/templates/bootstrap4/admin/file/list.html

@@ -42,9 +42,9 @@
                         <a href="{{ sort_url(column, dir_path, True) }}" title="{{ _gettext('Sort by %(name)s', name=column) }}">
                             {{ admin_view.column_label(column) }}
                             {% if sort_desc %}
-                                <span class="fa fa-chevron-up glyphicon glyphicon-chevron-up"></span>
+                                <span class="fa fa-chevron-up bi bi-chevron-up"></span>
                             {% else %}
-                                <span class="fa fa-chevron-down glyphicon glyphicon-chevron-down"></span>
+                                <span class="fa fa-chevron-down bi bi-chevron-down"></span>
                             {% endif %}
                         </a>
                     {% else %}
@@ -74,10 +74,10 @@
                   {%- if admin_view.rename_modal -%}
                     {{ lib.add_modal_button(url=get_url('.rename', path=path, modal=True),
                                             title=_gettext('Rename File'),
-                                            content='<i class="fa fa-pencil glyphicon glyphicon-pencil"></i>') }}
+                                            content='<i class="fa fa-pencil bi bi-pencil-fill"></i>') }}
                   {% else %}
                     <a class="icon" href="{{ get_url('.rename', path=path) }}" title="{{ _gettext('Rename File') }}">
-                      <i class="fa fa-pencil glyphicon glyphicon-pencil"></i>
+                      <i class="fa fa-pencil bi bi-pencil-fill"></i>
                     </a>
                   {%- endif -%}
                 {% endif %}
@@ -90,7 +90,7 @@
                             {{ delete_form.csrf_token }}
                             {% endif %}
                             <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\' recursively?', name=name) }}')">
-                                <i class="fa fa-times glyphicon glyphicon-remove"></i>
+                                <i class="fa fa-times bi bi-trash-fill"></i>
                             </button>
                         </form>
                         {% endif %}
@@ -101,7 +101,7 @@
                         {{ delete_form.csrf_token }}
                         {% endif %}
                         <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\'?', name=name) }}')">
-                            <i class="fa fa-trash glyphicon glyphicon-trash"></i>
+                            <i class="fa fa-trash bi bi-trash-fill"></i>
                         </button>
                     </form>
                     {% endif %}
@@ -111,7 +111,7 @@
             {% if is_dir %}
             <td colspan="2">
                 <a href="{{ get_dir_url('.index_view', path)|safe }}">
-                    <i class="fa fa-folder-o glyphicon glyphicon-folder-close"></i> <span>{{ name }}</span>
+                    <i class="fa fa-folder-o bi bi-folder"></i> <span>{{ name }}</span>
                 </a>
             </td>
             {% else %}

flask_admin/templates/bootstrap4/admin/layout.html

@@ -35,9 +35,9 @@
             {% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
             {{ menu_icon(item) }}{{ item.name }}
             {%- if 'dropdown-submenu' in class_name -%}
-              <i class="glyphicon glyphicon-chevron-right small"></i>
+              <i class="bi bi-chevron-right small"></i>
             {%- else -%}
-              <i class="glyphicon glyphicon-chevron-down small"></i>
+              <i class="bi bi-chevron-down small"></i>
             {%- endif -%}
           </a>
           <ul class="dropdown-menu">

flask_admin/templates/bootstrap4/admin/model/inline_list_base.html

@@ -13,7 +13,7 @@
                         <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
                         <label for="del-{{ subfield.id }}" class="d-inline">{{ _gettext('Delete?') }}</label>
                         {% else %}
-                        <a href="javascript:void(0)" value="{{ _gettext('Are you sure you want to delete this record?') }}" class="inline-remove-field"><i class="fa fa-times glyphicon glyphicon-remove"></i></a>
+                        <a href="javascript:void(0)" value="{{ _gettext('Are you sure you want to delete this record?') }}" class="inline-remove-field"><i class="fa fa-times bi bi-x"></i></a>
                         {% endif %}
                     </div>
                 </small>
@@ -32,7 +32,7 @@
             <legend>
                 <small>{{ _gettext('New') }} {{ field.label.text }}</small>
                 <div class="pull-right">
-                    <a href="javascript:void(0)" value="{{ _gettext('Are you sure you want to delete this record?') }}" class="inline-remove-field"><span class="fa fa-times glyphicon glyphicon-remove"></span></a>
+                    <a href="javascript:void(0)" value="{{ _gettext('Are you sure you want to delete this record?') }}" class="inline-remove-field"><span class="fa fa-times bi bi-x"></span></a>
                 </div>
             </legend>
             <div class='clearfix'></div>

flask_admin/templates/bootstrap4/admin/model/layout.html

@@ -81,7 +81,7 @@
                 <div class="input-group-append">
                   <span class="input-group-text">
                     <a href="{{ clear_search_url }}" class="align-middle">
-                      <span class="fa fa-times glyphicon glyphicon-remove"></span>
+                      <span class="fa fa-times bi bi-x"></span>
                     </a>
                   </span>
                 </div>