Replace glyphicons with forkawesome icons

Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
2026-01-21 07:55:00 +00:00 · 2019-01-14 14:35:34 +05:30 · 2019-01-14 14:35:34 +05:30 · 5d68f6bf52
commit 5d68f6bf52
parent 75d6b667ba
47 changed files with 81 additions and 80 deletions
--- a/debian/control
+++ b/debian/control
@ -63,6 +63,7 @@ Depends:
 debconf,
 dnsutils,
 e2fsprogs,
+ fonts-fork-awesome,
 fonts-lato,
 gettext,
 gir1.2-glib-2.0,
--- a/plinth/menu.py
+++ b/plinth/menu.py
@ -100,5 +100,5 @@ main_menu = Menu()

 def init():
    """Create main menu and other essential menus."""
-    main_menu.add_urlname('', 'glyphicon-download-alt', 'apps')
-    main_menu.add_urlname('', 'glyphicon-cog', 'system')
+    main_menu.add_urlname('', 'fa-download', 'apps')
+    main_menu.add_urlname('', 'fa-cog', 'system')
--- a/plinth/modules/avahi/init.py
+++ b/plinth/modules/avahi/init.py
@ -59,7 +59,7 @@ manual_page = 'ServiceDiscovery'
 def init():
    """Intialize the service discovery module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-lamp', 'avahi:index')
+    menu.add_urlname(name, 'fa-compass', 'avahi:index')

    global service  # pylint: disable=W0603
    service = service_module.Service(managed_services[0], name, ports=['mdns'],
--- a/plinth/modules/backups/init.py
+++ b/plinth/modules/backups/init.py
@ -54,7 +54,7 @@ SESSION_PATH_VARIABLE = 'fbx-backups-upload-path'
 def init():
    """Intialize the module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-duplicate', 'backups:index')
+    menu.add_urlname(name, 'fa-files-o', 'backups:index')


 def setup(helper, old_version=None):
--- a/plinth/modules/backups/templates/backups_repository.inc
+++ b/plinth/modules/backups/templates/backups_repository.inc
@ -26,7 +26,7 @@
      <th colspan="2">

        {% if repository.error %}
-           <span class="glyphicon glyphicon-warning-sign mount-error"
+           <span class="fa fa-exclamation-triangle mount-error"
                 aria-hidden="true" title="{{ repository.error }}">
           </span>
        {% endif %}
@ -45,7 +45,7 @@
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-default"
                     title="{% trans 'Unmount Location' %}">
-               <span class="glyphicon glyphicon-eject" aria-hidden="true">
+               <span class="fa fa-eject" aria-hidden="true">
               </button>
            </form>

@ -56,7 +56,7 @@
              {% csrf_token %}
              <button type="submit" class="btn btn-sm btn-default"
                     title="{% trans 'Mount Location' %}">
-               <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
+               <span class="fa fa-eye" aria-hidden="true">
               </button>
            </form>

@ -65,7 +65,7 @@
          <a title="{% trans 'Remove Location. This will not delete the remote backup.' %}"
             role="button" class="repository-remove btn btn-sm btn-default"
             href="{% url 'backups:repository-remove' uuid %}">
-             <span class="glyphicon glyphicon-trash" aria-hidden="true">
+             <span class="fa fa-trash" aria-hidden="true">
          </a>

        {% endif %}
@ -91,7 +91,7 @@
            </a>
            <a class="archive-delete btn btn-sm btn-default"
               href="{% url 'backups:delete' uuid archive.name %}">
-              <span class="glyphicon glyphicon-trash" aria-hidden="true">
+              <span class="fa fa-trash" aria-hidden="true">
              </span>
            </a>
          </td>
--- a/plinth/modules/bind/init.py
+++ b/plinth/modules/bind/init.py
@ -83,7 +83,7 @@ listen-on-v6 { any; };
 def init():
    """Intialize the BIND module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-globe', 'bind:index', short_description)
+    menu.add_urlname(name, 'fa-globe-w', 'bind:index', short_description)

    global service
    setup_helper = globals()['setup_helper']
--- a/plinth/modules/cockpit/init.py
+++ b/plinth/modules/cockpit/init.py
@ -63,7 +63,7 @@ manual_page = 'Cockpit'
 def init():
    """Intialize the module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-wrench', 'cockpit:index',
+    menu.add_urlname(name, 'fa-wrench', 'cockpit:index',
                     short_description)

    global service
--- a/plinth/modules/config/init.py
+++ b/plinth/modules/config/init.py
@ -73,7 +73,7 @@ def init():
    """Initialize the module"""
    menu = main_menu.get('system')
    menu.add_urlname(
-        ugettext_lazy('Configure'), 'glyphicon-cog', 'config:index')
+        ugettext_lazy('Configure'), 'fa-cog', 'config:index')

    # Register domain with Name Services module.
    domainname = get_domainname()
--- a/plinth/modules/datetime/init.py
+++ b/plinth/modules/datetime/init.py
@ -50,7 +50,7 @@ service = None
 def init():
    """Intialize the date/time module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-time', 'datetime:index')
+    menu.add_urlname(name, 'fa-clock-o', 'datetime:index')

    global service
    setup_helper = globals()['setup_helper']
--- a/plinth/modules/diagnostics/init.py
+++ b/plinth/modules/diagnostics/init.py
@ -43,7 +43,7 @@ manual_page = 'Diagnostics'
 def init():
    """Initialize the module"""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-screenshot', 'diagnostics:index')
+    menu.add_urlname(name, 'fa-heartbeat', 'diagnostics:index')


 def diagnose():
--- a/plinth/modules/diagnostics/templates/diagnostics.html
+++ b/plinth/modules/diagnostics/templates/diagnostics.html
@ -69,7 +69,7 @@
        {% if module_results %}
          {% include "diagnostics_results.html" with results=module_results %}
        {% else %}
-          <p><span class="glyphicon glyphicon-hourglass"></span></p>
+          <p><span class="fa fa-hourglass"></span></p>
        {% endif %}
      {% endfor %}
    {% endif %}
--- a/plinth/modules/diaspora/init.py
+++ b/plinth/modules/diaspora/init.py
@ -76,7 +76,7 @@ clients = clients
 def init():
    """Initialize the Diaspora module."""
    menu = main_menu.get('apps')
-    menu.add_urlname(name, 'glyphicon-thumbs-up', 'diaspora:index',
+    menu.add_urlname(name, 'fa-thumbs-o-up', 'diaspora:index',
                     short_description)

    global service
--- a/plinth/modules/dynamicdns/init.py
+++ b/plinth/modules/dynamicdns/init.py
@ -58,7 +58,7 @@ manual_page = 'DynamicDNS'
 def init():
    """Initialize the module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-refresh', 'dynamicdns:index')
+    menu.add_urlname(name, 'fa-refresh', 'dynamicdns:index')
    current_status = dynamicdns.get_status()
    if current_status['enabled']:
        services = dynamicdns.get_enabled_services(
--- a/plinth/modules/firewall/init.py
+++ b/plinth/modules/firewall/init.py
@ -54,7 +54,7 @@ LOGGER = logging.getLogger(__name__)
 def init():
    """Initailze firewall module"""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-fire', 'firewall:index')
+    menu.add_urlname(name, 'fa-shield', 'firewall:index')

    service_enabled.connect(on_service_enabled)

--- a/plinth/modules/first_boot/templates/firstboot_navbar.html
+++ b/plinth/modules/first_boot/templates/firstboot_navbar.html
@ -21,6 +21,6 @@

 <li>
  <a href="{% url 'help:index' %}" title="{% trans "Help" %}">
-    <span class="glyphicon-question-sign glyphicon nav-icon"></span>
+    <span class="fa fa-question-circle nav-icon"></span>
  </a>
 </li>
--- a/plinth/modules/help/help.py
+++ b/plinth/modules/help/help.py
@ -35,15 +35,15 @@ from plinth.menu import main_menu
 def init():
    """Initialize the Help module"""
    menu = main_menu.add_urlname(
-        ugettext_lazy('Documentation'), 'glyphicon-book', 'help:index')
+        ugettext_lazy('Documentation'), 'fa-book', 'help:index')
    menu.add_urlname(
-        ugettext_lazy('Manual'), 'glyphicon-info-sign', 'help:manual',
+        ugettext_lazy('Manual'), 'fa-info-circle', 'help:manual',
        order=10)
    menu.add_urlname(
-        ugettext_lazy('Download Manual'), 'glyphicon-download-alt',
+        ugettext_lazy('Download Manual'), 'fa-download',
        'help:download-manual', order=15)
    menu.add_urlname(
-        ugettext_lazy('About'), 'glyphicon-star', 'help:about', order=100)
+        ugettext_lazy('About'), 'fa-star', 'help:about', order=100)


 def index(request):
--- a/plinth/modules/help/templates/statuslog.html
+++ b/plinth/modules/help/templates/statuslog.html
@ -34,7 +34,7 @@
  </p>

  <p class="alert alert-warning">
-    <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
+    <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
    <span class="sr-only">{% trans "Caution:" %}</span>
    {% blocktrans trimmed %}
      Please remove any passwords or other personal information from
--- a/plinth/modules/ikiwiki/templates/ikiwiki_manage.html
+++ b/plinth/modules/ikiwiki/templates/ikiwiki_manage.html
@ -53,7 +53,7 @@
                 class="btn btn-default btn-sm pull-right"
                 role="button"
                 title="{% blocktrans %}Delete site {{ site }}{% endblocktrans %}">
-                <span class="glyphicon glyphicon-trash"
+                <span class="fa fa-trash"
                      aria-hidden="true"></span>
              </a>

--- a/plinth/modules/letsencrypt/init.py
+++ b/plinth/modules/letsencrypt/init.py
@ -71,7 +71,7 @@ logger = logging.getLogger(__name__)
 def init():
    """Intialize the module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-lock', 'letsencrypt:index',
+    menu.add_urlname(name, 'fa-lock', 'letsencrypt:index',
                     short_description)
    domainname_change.connect(on_domainname_change)
    domain_added.connect(on_domain_added)
--- a/plinth/modules/monkeysphere/init.py
+++ b/plinth/modules/monkeysphere/init.py
@ -58,7 +58,7 @@ def init():
    """Initialize the monkeysphere module."""
    menu = main_menu.get('system')
    menu.add_urlname(
-        _('Monkeysphere'), 'glyphicon-certificate', 'monkeysphere:index')
+        _('Monkeysphere'), 'fa-certificate', 'monkeysphere:index')


 def setup(helper, old_version=None):
--- a/plinth/modules/monkeysphere/templates/monkeysphere.html
+++ b/plinth/modules/monkeysphere/templates/monkeysphere.html
@ -96,7 +96,7 @@
                {% if domain not in key.imported_domains %}
                  <li>
                    <span class="label label-default"
-                      ><span class="glyphicon glyphicon-remove"
+                      ><span class="fa fa-times"
                             aria-hidden="true"></span></span>
                    <span class="monkeysphere-importable-domain"
                      >{{ domain }}</span>
@ -104,7 +104,7 @@
                {% elif domain not in key.available_domains %}
                  <li>
                    <span class="label label-warning"
-                      ><span class="glyphicon glyphicon-warning-sign"
+                      ><span class="fa fa-exclamation-triangle"
                             aria-hidden="true"></span></span>
                    <span class="monkeysphere-unavailable-domain"
                      >{{ domain }}</span>
@ -112,7 +112,7 @@
                {% else %}
                  <li>
                    <span class="label label-success"
-                      ><span class="glyphicon glyphicon-ok"
+                      ><span class="fa fa-check"
                             aria-hidden="true"></span></span>
                    <span class="monkeysphere-imported-domain"
                      >{{ domain }}</span>
--- a/plinth/modules/names/init.py
+++ b/plinth/modules/names/init.py
@ -50,7 +50,7 @@ manual_page = 'NameServices'
 def init():
    """Initialize the names module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-tag', 'names:index')
+    menu.add_urlname(name, 'fa-tags', 'names:index')

    domain_added.connect(on_domain_added)
    domain_removed.connect(on_domain_removed)
--- a/plinth/modules/networks/init.py
+++ b/plinth/modules/networks/init.py
@ -42,7 +42,7 @@ manual_page = 'Networks'
 def init():
    """Initialize the Networks module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-signal', 'networks:index')
+    menu.add_urlname(name, 'fa-signal', 'networks:index')


 def setup(helper, old_version=None):
--- a/plinth/modules/networks/templates/connection_show.html
+++ b/plinth/modules/networks/templates/connection_show.html
@ -276,7 +276,7 @@
        </div>

        <div class="alert alert-info">
-          <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
+          <span class="fa fa-info-circle" aria-hidden="true"></span>
          {% blocktrans trimmed %}
            This interface should be connected to a local
            network/machine.  If you connect this interface to a
@ -296,7 +296,7 @@
        </div>

        <div class="alert alert-info">
-          <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
+          <span class="fa fa-info-circle" aria-hidden="true"></span>
          {% blocktrans trimmed %}
            This interface should receive your Internet connection.
            If you connect it to a local network/machine, many
@ -315,7 +315,7 @@
        </div>

        <div class="alert alert-danger">
-          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+          <span class="fa fa-exclamation-circle" aria-hidden="true"></span>
          {% blocktrans trimmed %}
            This interface is not maintained by {{ box_name }}.  Its
            security status is unknown to {{ box_name }}.  Many {{ box_name }}
--- a/plinth/modules/networks/templates/connections_list.html
+++ b/plinth/modules/networks/templates/connections_list.html
@ -63,7 +63,7 @@
           class="btn btn-default btn-sm pull-right"
           role="button"
           title="{% blocktrans with name=connection.name %}Delete connection {{ name }}{% endblocktrans %}">
-          <span class="glyphicon glyphicon-trash"
+          <span class="fa fa-trash-o"
                aria-hidden="true"></span>
        </a>

--- a/plinth/modules/pagekite/init.py
+++ b/plinth/modules/pagekite/init.py
@ -80,7 +80,7 @@ manual_page = 'PageKite'
 def init():
    """Intialize the PageKite module"""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-flag', 'pagekite:index',
+    menu.add_urlname(name, 'fa-flag', 'pagekite:index',
                     short_description)

    # Register kite name with Name Services module.
--- a/plinth/modules/pagekite/templates/pagekite_custom_services.html
+++ b/plinth/modules/pagekite/templates/pagekite_custom_services.html
@ -99,7 +99,7 @@
              </div>
              <button type="submit" class="btn btn-default"
                      title="{% trans "Delete this service" %}">
-                <span class="glyphicon glyphicon-trash" aria-hidden="true">
+                <span class="fa fa-trash-o" aria-hidden="true">
                </span>
              </button> 
            </form>
--- a/plinth/modules/restore/init.py
+++ b/plinth/modules/restore/init.py
@ -60,7 +60,7 @@ service = None
 def init():
    """Initialize the reStore module."""
    menu = main_menu.get('apps')
-    menu.add_urlname(name, 'glyphicon-hdd', 'restore:index', short_description)
+    menu.add_urlname(name, 'fa-hdd-o', 'restore:index', short_description)

    global service
    setup_helper = globals()['setup_helper']
--- a/plinth/modules/security/init.py
+++ b/plinth/modules/security/init.py
@ -46,7 +46,7 @@ ACCESS_CONF_SNIPPETS = [OLD_ACCESS_CONF_SNIPPET, ACCESS_CONF_SNIPPET]
 def init():
    """Initialize the module"""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-lock', 'security:index')
+    menu.add_urlname(name, 'fa-lock', 'security:index')


 def setup(helper, old_version=None):
--- a/plinth/modules/shaarli/init.py
+++ b/plinth/modules/shaarli/init.py
@ -52,7 +52,7 @@ manual_page = 'Shaarli'
 def init():
    """Initialize the module."""
    menu = main_menu.get('apps')
-    menu.add_urlname(name, 'glyphicon-bookmark', 'shaarli:index',
+    menu.add_urlname(name, 'fa-bookmark', 'shaarli:index',
                     short_description)

    global service
--- a/plinth/modules/sharing/templates/sharing.html
+++ b/plinth/modules/sharing/templates/sharing.html
@ -76,12 +76,12 @@
            <td class="share-operations">
              <a class="share-edit btn btn-sm btn-default"
                 href="{% url 'sharing:edit' share.name %}">
-                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+                <span class="fa fa-pencil-square-o" aria-hidden="true"></span>
              </a>
              <form class="form form-inline" method="post"
                    action="{% url 'sharing:remove' share.name %}">
                {% csrf_token %}
-                <button class="share-remove btn btn-sm btn-default glyphicon glyphicon-trash"
+                <button class="share-remove btn btn-sm btn-default fa fa-trash"
                        type="submit"></button>
              </form>
            </td>
--- a/plinth/modules/snapshot/init.py
+++ b/plinth/modules/snapshot/init.py
@ -61,7 +61,7 @@ fs_types_supported = ['btrfs']
 def init():
    """Initialize the module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-film', 'snapshot:index')
+    menu.add_urlname(name, 'fa-film', 'snapshot:index')


 def is_supported():
--- a/plinth/modules/snapshot/templates/snapshot_manage.html
+++ b/plinth/modules/snapshot/templates/snapshot_manage.html
@ -65,7 +65,7 @@
                     title="{% blocktrans trimmed with number=snapshot.number %}
                           Rollback to snapshot #{{ number }}
                     {% endblocktrans %}">
-                    <span class="glyphicon glyphicon-repeat"
+                    <span class="fa fa-repeat"
                          aria-hidden="true"></span>
                  </a>
                </td>
--- a/plinth/modules/ssh/init.py
+++ b/plinth/modules/ssh/init.py
@ -50,7 +50,7 @@ service = None
 def init():
    """Intialize the ssh module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-console', 'ssh:index')
+    menu.add_urlname(name, 'fa-terminal', 'ssh:index')

    global service
    service = service_module.Service(
--- a/plinth/modules/storage/init.py
+++ b/plinth/modules/storage/init.py
@ -60,7 +60,7 @@ is_essential = True
 def init():
    """Intialize the module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-hdd', 'storage:index')
+    menu.add_urlname(name, 'fa-hdd-o', 'storage:index')


 def get_disks():
--- a/plinth/modules/storage/templates/storage.html
+++ b/plinth/modules/storage/templates/storage.html
@ -94,7 +94,7 @@
                {% csrf_token %}

                <button type="submit"
-                        class="btn btn-sm btn-default glyphicon glyphicon-eject">
+                        class="btn btn-sm btn-default fa fa-eject">
                </button>
              </form>
            {% endif %}
--- a/plinth/modules/upgrades/init.py
+++ b/plinth/modules/upgrades/init.py
@ -46,7 +46,7 @@ manual_page = 'Upgrades'
 def init():
    """Initialize the module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-refresh', 'upgrades:index')
+    menu.add_urlname(name, 'fa-refresh', 'upgrades:index')
    global service
    service = service_module.Service('auto-upgrades', name, is_external=False,
                                     is_enabled=is_enabled, enable=enable,
--- a/plinth/modules/users/init.py
+++ b/plinth/modules/users/init.py
@ -51,7 +51,7 @@ groups = dict()
 def init():
    """Intialize the user module."""
    menu = main_menu.get('system')
-    menu.add_urlname(name, 'glyphicon-user', 'users:index')
+    menu.add_urlname(name, 'fa-users', 'users:index')


 def setup(helper, old_version=None):
--- a/plinth/modules/users/templates/users_list.html
+++ b/plinth/modules/users/templates/users_list.html
@ -45,7 +45,7 @@
                class="btn btn-default btn-sm pull-right"
                role="button"
                title="{% blocktrans with username=user.username %}Delete user {{ username }}{% endblocktrans %}">
-                <span class="glyphicon glyphicon-trash"
+                <span class="fa fa-trash-o"
                      aria-hidden="true"></span>
              </a>
            {% endif %}
@ -57,7 +57,7 @@
            </a>

            {% if not user.is_active %}
-              <span class="glyphicon glyphicon-ban-circle"
+              <span class="fa fa-ban"
                    aria-hidden="true"></span>
            {% endif %}
          </div>
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@ -69,6 +69,7 @@

  <!-- Bootstrap base CSS -->
  <link rel="stylesheet" href="{% static '/javascript/bootstrap/css/bootstrap.min.css' %}"/>
+  <link rel="stylesheet" href="{% static '/javascript/fork-awesome/css/fork-awesome.css' %}"/>
  <link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/>
  <link rel="stylesheet" href="{% static 'theme/css/responsive.css' %}"/>
  <!-- Local link to system Turbolinks JS -->
@ -100,8 +101,7 @@
        {% block mainmenu_left %}
          <a href="{% url 'index' %}"  class="navbar-brand"
             title="{{ box_name }}">
-            <img src="{% static 'theme/img/FreedomBox-logo-32px-white.png' %}"
-                 alt="{{ box_name }}" />
+            <i class="fa fa-freedombox fa-2x fa-inverse" aria-hidden="true"></i>
          </a>
        {% endblock %}
      </div>
@ -121,7 +121,7 @@
              <a href="{{ apps_url }}" title='{% trans " Apps" %}'
                 class="{% if apps_url == submenu.url %}
                 menu_link_active {% else %} menu_link {% endif %}">
-                <span class="glyphicon glyphicon-th"></span>
+                <span class="fa fa-th"></span>
                {% trans "Apps" %}
              </a>
            </li>
@ -130,7 +130,7 @@
              <a href="{{ system_url }}" title='{% trans " System" %}'
                 class="{% if system_url == submenu.url %}
                 menu_link_active {% else %} menu_link {% endif %}">
-                <span class="glyphicon glyphicon-cog nav-icon"></span>
+                <span class="fa fa-cog nav-icon"></span>
                {% trans "System" %}
              </a>
            </li>
@ -142,14 +142,14 @@
            {% if user.is_authenticated %}
              <li>
                <a href="{% url 'help:index' %}" title="{% trans "Help" %}">
-                  <span class="glyphicon-question-sign glyphicon nav-icon"></span>
+                  <span class="fa fa-question-circle nav-icon"></span>
                </a>
              </li>
              <li class="dropdown">
                <a href="{% url 'users:edit' request.user.username %}"
                   class="dropdown-toggle" data-toggle="dropdown"
                   role="button" aria-expanded="false">
-                  <i class="glyphicon glyphicon-user nav-icon"></i>
+                  <i class="fa fa-user nav-icon"></i>
                  {{ request.user.username }}
                  <span class="caret"></span>
                </a>
@ -194,12 +194,12 @@
              <li>
                <a href="{% url 'language-selection' %}?next={{ request.path|iriencode }}"
                   title="{% trans "Select language" %}">
-                  <i class="glyphicon glyphicon-globe nav-icon"></i>
+                  <i class="fa fa-globe-w  nav-icon"></i>
                </a>
              </li>
              <li>
                  <a href="{% url 'users:login' %}" title="{% trans "Log in" %}">
-                    <i class="glyphicon glyphicon-user nav-icon"></i>
+                    <i class="fa fa-user nav-icon"></i>
                    {% trans "Log in" %}</a>
              </li>
            {% endif %}
@ -207,7 +207,7 @@
            {% if user.is_authenticated %}
              <li id="logout-nojs">
                <a href="{% url 'users:logout' %}" title="{% trans "Log out" %}">
-                  <i class="glyphicon glyphicon-remove-circle nav-icon"></i>
+                  <i class="fa fa-times-circle nav-icon"></i>
                  {% trans "Log out" %}</a>
              </li>
            {% endif %}
--- a/plinth/templates/cards.html
+++ b/plinth/templates/cards.html
@ -39,8 +39,8 @@
            <a href="{{ item.url }}" class="nav-link">
              <div class="card-title">{{ item.name }}</div>
              <div class="card-icon">
-                {% if 'glyphicon-' in item.icon %}
-                  <span class="{{ item.icon }} glyphicon"></span>
+                {% if 'fa-' in item.icon %}
+                  <span class="fa {{ item.icon }} fa-3x"></span>
                {% else %}
                  <img src="{% static 'theme/icons/' %}{{ item.icon }}.png"/>
                {% endif %}
--- a/plinth/templates/clients.html
+++ b/plinth/templates/clients.html
@ -26,7 +26,7 @@
    <button id="clients-button" type="button" class="btn btn-default collapsed"
            data-toggle="collapse" data-target="#clients">
      {% trans "Client Apps" %}
-      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+      <span class="fa fa-chevron-right" aria-hidden="true"></span>
    </button>
  </p>

@ -48,7 +48,7 @@
                {% else %} href="{{ platform.url }}"
                {% endif %}>
                  {% trans "Launch" %}
-                  <span class="glyphicon glyphicon-new-window"></span>
+                  <span class="fa fa-external-link"></span>
                </a>
              </td>
            {% endif %}
--- a/plinth/templates/menu.html
+++ b/plinth/templates/menu.html
@ -29,7 +29,7 @@
      <li>
        <a href="{{ item.url }}">
    {% endif %}
-          <span class="{{ item.icon }} glyphicon"></span>
+          <span class="fa {{ item.icon }}"></span>
          {{ item.label }}
        </a>
        {% if item.items %}
--- a/plinth/templates/setup.html
+++ b/plinth/templates/setup.html
@ -86,7 +86,7 @@
            This application is currently not available in your distribution.
          {% endblocktrans %}
          <button type="submit" class="btn btn-default btn-sm" name="refresh-packages">
-            <span class="glyphicon glyphicon-refresh"></span> Check again
+            <span class="fa fa-refresh"></span> Check again
          </button>
        </div>
      {% endif %}
--- a/plinth/templates/submenu.html
+++ b/plinth/templates/submenu.html
@ -29,7 +29,7 @@
      <li>
        <a href="{{ item.url }}">
    {% endif %}
-          <span class="{{ item.icon }} glyphicon"></span>
+          <span class="fa {{ item.icon }}"></span>
          {{ item.label }}
        </a>
      </li>
--- a/plinth/tests/test_menu.py
+++ b/plinth/tests/test_menu.py
@ -73,12 +73,12 @@ class MenuTestCase(TestCase):

        apps_menu = main_menu.get('apps')
        self.assertEqual(apps_menu.label, '')
-        self.assertEqual(apps_menu.icon, 'glyphicon-download-alt')
+        self.assertEqual(apps_menu.icon, 'fa-download')
        self.assertEqual(str(apps_menu.url), '/apps/')

        system_menu = main_menu.get('system')
        self.assertEqual(system_menu.label, '')
-        self.assertEqual(system_menu.icon, 'glyphicon-cog')
+        self.assertEqual(system_menu.icon, 'fa-cog')
        self.assertEqual(str(system_menu.url), '/sys/')

    def test_menu_creation_without_arguments(self):
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@ -67,14 +67,14 @@ body {
    list-style-type: none;
 }

-.nav .glyphicon,
-.sidebar .glyphicon {
+.nav .fa,
+.sidebar .fa {
    margin-right: 4px;
 }

-.navbar-brand img {
+.navbar-brand .fa {
    float: left;
-    margin-top: -10px;
+    margin-top: -15px;
    padding: 8px;
 }

@ -220,17 +220,17 @@ footer license-info p {
 }

 /* Icon when collapsible content is shown */
-#clients-button .glyphicon {
+#clients-button .fa {
    margin-left: 5px;
 }

-#clients-button .glyphicon:before,
-.no-js #clients-button.collapsed .glyphicon:before {
-    content: "\e114";
+#clients-button .fa:before,
+.no-js #clients-button.collapsed .fa:before {
+    content: "\f054";
 }

-#clients-button.collapsed .glyphicon:before {
-    content: "\e080";
+#clients-button.collapsed .fa:before {
+    content: "\f078";
 }

 /* No-JS fallbacks for collapsible content in clients.html */