[FINNA-1432] Remove hard-coded FontAwesome code points from styles. (#…

…3111) This improves forward-compatibility with Bootstrap 5.
NatLibFi · Dec 19, 2024 · 8bdb9a9 · 8bdb9a9
1 parent dd7b897
commit 8bdb9a9
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 35 deletions.
diff --git a/themes/finna2/js/finna-autocomplete.js b/themes/finna2/js/finna-autocomplete.js
@@ -22,7 +22,7 @@ finna.autocomplete = (function finnaAutocomplete() {
     $('.autocomplete-finna').each(function initAutocompleteFields(i, op) {
       var searcher = extractClassParams(op);
       $(op).autocompleteFinna({
-        loadingString: VuFind.translate('loading_ellipsis'),
+        loadingString: VuFind.loading(),
         suggestions: searcher.suggestions !== '0',
         handler: function handleAutocomplete(query, cb) {
           if (searcher.suggestions === '0') {

diff --git a/themes/finna2/scss/finna/advanced-search.scss b/themes/finna2/scss/finna/advanced-search.scss
@@ -469,11 +469,8 @@
           z-index: 1;
         }
         .value:before {
-            content: '\f096';
-            font-family: 'FontAwesome';
+          @extend .fa, .fa-square-o;
             margin: 0px 4px;
-            font-weight: initial;
-            display: inline-block;
             width: 12px;
             font-size: 16px;
         }

diff --git a/themes/finna2/scss/finna/autocomplete.scss b/themes/finna2/scss/finna/autocomplete.scss
@@ -32,14 +32,6 @@
         }
         &.loading {
             font-style: normal;
-            &:before {
-                  font-family:'Fontawesome';
-                  content: "\f110";
-                  color: $gray-light;
-                  font-size: 1.2em;
-                  margin-right: 5px;
-                  @extend .fa-spin;
-            }
         }
     }
     & .group {

diff --git a/themes/finna2/scss/finna/common.scss b/themes/finna2/scss/finna/common.scss
@@ -550,16 +550,13 @@ ol {
     top: 3px;
     position: relative;
 
-    &:checked{
-      background-color: black;
-      &:after{
-        font-family: 'Fontawesome';
-        content: "\f00c";
-        color: white;
+    &:checked {
+      color: $body-bg;
+      background-color: $body-color;
+
+      &:before {
+        @extend .fa, .fa-check;
         position: absolute;
-        font-size: 14px;
-        line-height: 14px;
-        font-weight: normal;
       }
     }
   }

diff --git a/themes/finna2/scss/finna/filters.scss b/themes/finna2/scss/finna/filters.scss
@@ -158,10 +158,6 @@
     padding-top: 5px;
     padding-bottom: 5px;
   }
-  .btn::after {
-    content: "\f107";
-    font-family: "FontAwesome";
-  }
 
   .dropdown-menu {
     &>li {

diff --git a/themes/finna2/scss/finna/map.scss b/themes/finna2/scss/finna/map.scss
@@ -19,7 +19,6 @@ div.selection-map-canvas {
 }
 
 .leaflet-marker-icon.leaflet-div-icon {
-  font-family: FontAwesome;
   font-size: 15px;
   text-rendering: auto;
   border: none;
@@ -32,7 +31,7 @@ div.selection-map-canvas {
   &.leaflet-edit-move {
     padding: 2px;
     &:before {
-      content: "\f047";
+      @extend .fa, .fa-arrows;
       font-size: 25px;
       position: relative;
       padding: 5px;
@@ -43,7 +42,7 @@ div.selection-map-canvas {
   &.leaflet-edit-resize {
     padding: 5px;
     &:before {
-      content: "\f065";
+      @extend .fa, .fa-expand;
       font-size: 20px;
       padding: 5px;
       border-radius: 50%;

diff --git a/themes/finna2/scss/finna/mobile-toolbar.scss b/themes/finna2/scss/finna/mobile-toolbar.scss
@@ -145,9 +145,6 @@ section.template-dir-collection.template-name-view .sidebar {
       top: 0;
       opacity: 100%;
     }
-    .list-group-item.active i.fa.fa-check-square-o:before {
-      content: "\f00c" !important;
-    }
     .list-group.facet {
       margin: 0 10px 5px 10px;
       &:first-of-type {

diff --git a/themes/finna2/scss/finna/myresearch.scss b/themes/finna2/scss/finna/myresearch.scss
@@ -1015,9 +1015,6 @@ form#renewals, form#update_holds, form#purge_history {
     .list-group.facet:last-child {
       margin-bottom: 44px;
     }
-    .list-group-item.active i.fa.fa-check-square-o:before {
-      content: "\f00c" !important;
-    }
     .list-group.facet {
       margin: 0 10px;
       margin-bottom: 5px;

diff --git a/themes/finna2/scss/global/bootstrap-variable-overrides.scss b/themes/finna2/scss/global/bootstrap-variable-overrides.scss
@@ -65,6 +65,7 @@ $grid-float-breakpoint:     992px !default; // $screen-md-min
 
 $body-bg: #fff !default;
 $text-color: $gray-dark !default;
+$body-color: $text-color !default;
 $link-color:  #007c90 !default; // defines all link color, also for linked icons
 $link-hover-color: $link-color !default;
 $link-hover-decoration: #fff !default;

diff --git a/themes/finna2/templates/search/filters.phtml b/themes/finna2/templates/search/filters.phtml
@@ -72,6 +72,7 @@
               <?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $field); ?>
               <button id="dropdown-toggle-<?=$safeId?>" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                 <?=$this->transEsc('filter_toggle_entries', ['%%count%%' => count($data)])?>
+                <?=$this->icon('dropdown-open')?>
               </button>
               <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-toggle-<?=$safeId?>">
           <?php else: ?>