Merge pull request #407 from itk-dev/feature/1353-fontawesome-remove-cdn

Fontawesome: Use local i2svg replace. Update icons. Add missing icons.
itk-dev · May 13, 2024 · c84270f · c84270f
2 parents 4163640 + f7ec9cb
commit c84270f
Show file tree

Hide file tree

Showing 19 changed files with 69 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+* [PR-407](https://github.com/itk-dev/hoeringsportal/pull/407)
+  Fix fontawesome issues
 * [PR-406](https://github.com/itk-dev/hoeringsportal/pull/406)
   Infobox styling
 * [PR-405](https://github.com/itk-dev/hoeringsportal/pull/405)

diff --git a/web/themes/custom/hoeringsportal/assets/js/icons.js b/web/themes/custom/hoeringsportal/assets/js/icons.js
@@ -3,50 +3,73 @@
 */
 
 // Import the svg core
-import { library } from '@fortawesome/fontawesome-svg-core'
+import { library, dom } from '@fortawesome/fontawesome-svg-core'
 
 // To keep the package size as small as possible we only import icons we use
 
 // Import the icons from the free solid package.
 import {
-  faSort,
+  faArrowRight,
+  faCopy,
+  faComment,
+  faCircleCheck,
+  faFilePdf,
   faEnvelope,
-  faSearch,
+  faMagnifyingGlass,
+  faPrint,
+  faSort,
   faTimes,
-  faCopy,
-  faPrint
+  faCircle,
+  faFileWord,
+  faFileAlt,
+  faFileImage,
+  faFileExcel,
+  faTicketAlt
 } from '@fortawesome/free-solid-svg-icons'
 
 // Import icons from the free brands package
 import {
+  faDigg,
+  faEvernote,
   faFacebook,
-  faXTwitter,
-  faLinkedin,
-  faWhatsapp,
   faFacebookMessenger,
+  faLinkedin,
   faPinterest,
-  faDigg,
-  faTumblr,
   faReddit,
-  faEvernote
+  faTumblr,
+  faWhatsapp,
+  faXTwitter
 } from '@fortawesome/free-brands-svg-icons'
 
 // Add the icons to the library for replacing <i class="fa-solid fa-sort"></i> with the intended svg.
 library.add(
-  faSort,
+  // Solid
+  faArrowRight,
+  faCircle,
+  faCircleCheck,
+  faComment,
+  faCopy,
   faEnvelope,
-  faSearch,
+  faFilePdf,
+  faFileWord,
+  faFileAlt,
+  faFileImage,
+  faFileExcel,
+  faMagnifyingGlass,
+  faPrint,
+  faSort,
   faTimes,
+  faTicketAlt,
+  // Brand
+  faDigg,
+  faEvernote,
   faFacebook,
-  faXTwitter,
-  faLinkedin,
-  faWhatsapp,
   faFacebookMessenger,
+  faLinkedin,
   faPinterest,
-  faDigg,
-  faTumblr,
   faReddit,
-  faEvernote,
-  faCopy,
-  faPrint
+  faTumblr,
+  faWhatsapp,
+  faXTwitter
 )
+dom.i2svg()
diff --git a/web/themes/custom/hoeringsportal/templates/block/block--system-menu-block.html.twig b/web/themes/custom/hoeringsportal/templates/block/block--system-menu-block.html.twig
@@ -32,7 +32,7 @@
  */
 #}
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
-<div role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }} {{ attributes.addClass('order-1 order-md-0') }}>
+<div role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby').addClass('order-1 order-md-0') }} >
   {# Label. If not displayed, we still provide it for screen readers. #}
   {% if not configuration.label_display %}
     {% set title_attributes = title_attributes.addClass('visually-hidden') %}

diff --git a/web/themes/custom/hoeringsportal/templates/content/node--citizen-proposal--teaser.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--citizen-proposal--teaser.html.twig
@@ -92,7 +92,7 @@
       <span class="activity-teaser-meta-wrapper text-primary">
         {{ content.field_author_name }}
       </span>
-      <span class="activity-teaser-link "><i class="fa fa-arrow-right float-right"></i></span>
+      <span class="activity-teaser-link "><i class="fa-solid fa-arrow-right float-right"></i></span>
     </div>
   </div>
 </a>
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--list-display.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--list-display.html.twig
@@ -105,7 +105,7 @@
         {% if (content.field_hearing_id) %}
           <span class="activity-teaser-id">{{ content.field_hearing_id }}</span>
         {% endif %}
-        <span class="activity-teaser-link"><i class="fa fa-arrow-right float-right"></i></span>
+        <span class="activity-teaser-link"><i class="fa-solid fa-arrow-right float-right"></i></span>
       </div>
     </div>
   </a>

diff --git a/web/themes/custom/hoeringsportal/templates/content/node--project-main-page--teaser.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--project-main-page--teaser.html.twig
@@ -14,6 +14,6 @@
       <span class="activity-teaser-type">{{ content.field_project_category }}</span>
       <span class="activity-teaser-area is-comma-separated">{{ content.field_area }}</span>
     </span>
-    <span class="activity-teaser-link "><i class="fa fa-arrow-right float-right"></i></span>
+    <span class="activity-teaser-link "><i class="fa-solid fa-arrow-right float-right"></i></span>
   </div>
 </a>
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--public-meeting--teaser.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--public-meeting--teaser.html.twig
@@ -91,7 +91,7 @@
           <div class="splash-date-month">{{ enddate|date('M')|t }}</div>
         {% elseif (content_state == 'finished') %}
           <div class="splash-label">{{ 'Finished'|t }}</div>
-          <div class="splash-date-day"><i class="fa fa-check-circle"></i></div>
+          <div class="splash-date-day"><i class="fa-solid fa-check-circle"></i></div>
           <div class="splash-date-month"></div>
           {% set overlay = 'TRUE' %}
           {% set overlay_text = 'Finished'|t %}
@@ -132,6 +132,6 @@
       {% endif %}
       <span class="activity-teaser-area is-comma-separated">{{ content.field_area }}</span>
     </span>
-    <span class="activity-teaser-link "><i class="fa fa-arrow-right float-right"></i></span>
+    <span class="activity-teaser-link "><i class="fa-solid fa-arrow-right float-right"></i></span>
   </div>
 </a>
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--static-page--teaser.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--static-page--teaser.html.twig
@@ -76,6 +76,6 @@ set classes = [
   <div class="page-teaser-content">
     <p class="page-teaser-title underlined">{{ label }}</p>
     <p class="page-teaser-description">{{ content }}</p>
-    <i class="page-teaser-link fa fa-arrow-right float-right"></i>
+    <i class="page-teaser-link fa-solid fa-arrow-right float-right"></i>
   </div>
 </a>
diff --git a/web/themes/custom/hoeringsportal/templates/content/node--teaser.html.twig b/web/themes/custom/hoeringsportal/templates/content/node--teaser.html.twig
@@ -102,7 +102,7 @@
           {% set overlay_text_color = 'text-orange' %}
         {% elseif (content_state == 'finished') %}
           <div class="splash-label">{{ 'Finished'|t }}</div>
-          <div class="splash-date-day"><i class="fa fa-check-circle"></i></div>
+          <div class="splash-date-day"><i class="fa-solid fa-check-circle"></i></div>
           <div class="splash-date-month"></div>
           {% set overlay = 'TRUE' %}
           {% set overlay_text = 'Finished'|t %}
@@ -119,7 +119,7 @@
       {% set ticket_count = deskpro_get_ticket_count(node) %}
       {% if ticket_count > 0 %}
         <div class="splash splash-comments">
-          <span class="splash-comments-count"><i class="fa fa-comment"></i>{{ ticket_count }}</span>
+          <span class="splash-comments-count"><i class="fa-solid fa-comment"></i>{{ ticket_count }}</span>
         </div>
       {% endif %}
     </div>
@@ -152,6 +152,6 @@
       {% endif %}
       <span class="activity-teaser-area is-comma-separated">{{ content.field_area }}</span>
     </span>
-    <span class="activity-teaser-link "><i class="fa fa-arrow-right float-right"></i></span>
+    <span class="activity-teaser-link "><i class="fa-solid fa-arrow-right float-right"></i></span>
   </div>
 </a>
diff --git a/...oeringsportal/templates/field/field--dynamic-block-field--node-project-timeline.html.twig b/...oeringsportal/templates/field/field--dynamic-block-field--node-project-timeline.html.twig
@@ -83,7 +83,7 @@
     <div class="row">
       <div class="project-type-label-wrapper mt-5 mb-5">
         {% for term in timeline_terms %}
-          <div class="project-type-label" style="color: {{ term.color }}"><i class="fa fa-circle pe-1"></i>{{ term.name }}</div>
+          <div class="project-type-label" style="color: {{ term.color }}"><i class="fa-solid fa-circle pe-1"></i>{{ term.name }}</div>
         {% endfor %}
       </div>
     </div>

diff --git a/web/themes/custom/hoeringsportal/templates/field/field--field-itk-media-mime-type.html.twig b/web/themes/custom/hoeringsportal/templates/field/field--field-itk-media-mime-type.html.twig
@@ -52,5 +52,5 @@
 
 {% for item in items %}
    {% set icon = mime_type_icons[item.content['#context'].value]|default('fa-file') %}
-   <i class="fa {{ icon }} fa-sm ms-2 me-2 mt-1"></i>
+   <i class="fa-solid {{ icon }} fa-sm ms-2 me-2 mt-1"></i>
 {% endfor %}
diff --git a/web/themes/custom/hoeringsportal/templates/field/field--node--field-video--project.html.twig b/web/themes/custom/hoeringsportal/templates/field/field--node--field-video--project.html.twig
@@ -42,7 +42,7 @@
     {% for key, item in items %}
       <div>
         <a class="video-link use-ajax" data-dialog-options="{&quot;width&quot;:1500}" data-dialog-type="modal" href="/content-video/{{ element['#object'].id() }}/{{ key }}">
-          <i class="fas fa-video"></i>
+          <i class="fa-solid fa-video"></i>
           {{ item.content }}
         </a>
       </div>

diff --git a/.../templates/field/field--paragraph--field-external-link--projekt-billede-galleri.html.twig b/.../templates/field/field--paragraph--field-external-link--projekt-billede-galleri.html.twig
@@ -47,7 +47,7 @@
       {% for item in items %}
         <a target="_blank" href="{{ item.content['#url'].uri }}" class="image-gallery-link">
           <div class="image-gallery-link--content">
-            <p class="fa-images-wrapper"><i class="fa fa-images"></i></p>
+            <p class="fa-images-wrapper"><i class="fa-solid fa-images"></i></p>
             <p>{{ 'Open project gallery'|t }}</p>
           </div>
         </a>

diff --git a/web/themes/custom/hoeringsportal/templates/form/form--search-block-form.html.twig b/web/themes/custom/hoeringsportal/templates/form/form--search-block-form.html.twig
@@ -19,15 +19,15 @@
 
 <div class="search-collapse-wrapper d-flex gap-2 order-0 order-md-1">
   <button class="btn btn-link p-0 pt-1 align-self-start align-self-md-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch">
-    <i class="fas fa-search"></i>
+    <i class="fa-solid fa-magnifying-glass"></i>
   </button>
   <div class="collapse bg-white z-1" id="collapseSearch">
     <div class="d-flex gap-2">
       <form{{ attributes.addClass(classes) }}>
         {{ children }}
       </form>
       <button class="btn btn-link p-1 align-self-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch">
-        <i class="fas fa-times"></i>
+        <i class="fa-solid fa-times"></i>
       </button>
     </div>
   </div>

diff --git a/web/themes/custom/hoeringsportal/templates/layout/html.html.twig b/web/themes/custom/hoeringsportal/templates/layout/html.html.twig
@@ -31,8 +31,6 @@
     <script id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="DA" type="text/javascript"></script>
     <css-placeholder token="{{ placeholder_token|raw }}">
     <js-placeholder token="{{ placeholder_token|raw }}">
-    <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/solid.js" integrity="sha384-Q7KAHqDd5trmfsv85beYZBsUmw0lsreFBQZfsEhzUtUn5HhpjVzwY0Aq4z8DY9sA" crossorigin="anonymous"></script>
-    <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/fontawesome.js" integrity="sha384-M2FSA4xMm1G9m4CNXM49UcDHeWcDZNucAlz1WVHxohug0Uw1K+IpUhp/Wjg0y6qG" crossorigin="anonymous"></script>
   </head>
   <body{{ attributes.addClass('hyphenate') }}>
     {#

diff --git a/web/themes/custom/hoeringsportal/templates/misc/itk-pretix-date-entry.html.twig b/web/themes/custom/hoeringsportal/templates/misc/itk-pretix-date-entry.html.twig
@@ -16,7 +16,7 @@
 {% set availability = public_meeting_helper.getPretixAvailability(variables.data) %}
 
 <tr class="pretix-date {{ registration_deadline_passed ? 'pretix-registration-deadline-passed' }} {{ meeting_has_been_held ? 'pretix-meeting-has-been-held' }}">
-  <td><i class="fas fa-ticket-alt"></i></td>
+  <td><i class="fa-solid fa-ticket-alt"></i></td>
   <td>{{ variables.location }}</td>
   <td>{{ variables.time_from|date('U')|format_date('hoeringsportal_date_long') }}</td>
   <td>{{ variables.time_from|date('U')|format_date('hoeringsportal_time') }}–{{ variables.time_to|date('U')|format_date('hoeringsportal_time') }}</td>

diff --git a/web/themes/custom/hoeringsportal/templates/navigation/pager.html.twig b/web/themes/custom/hoeringsportal/templates/navigation/pager.html.twig
@@ -35,24 +35,24 @@
       {% if items.previous %}
         <li class="page-item">
           <a href="{{ items.previous.href }}" title="{{ 'Previous'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }} class="page-link">
-            <span><i class="fa fa-arrow-left fa-sm me-2"></i> {{ 'Previous'|t }}</span>
+            <span><i class="fa-solid fa-arrow-left fa-sm me-2"></i> {{ 'Previous'|t }}</span>
           </a>
         </li>
       {% else %}
         <li class="page-item disabled">
-          <span class="page-link"><i class="fa fa-arrow-left fa-sm me-2"></i> {{ 'Previous'|t }}</span>
+          <span class="page-link"><i class="fa-solid fa-arrow-left fa-sm me-2"></i> {{ 'Previous'|t }}</span>
         </li>
       {% endif %}
       <li class="page-item disabled"><span class="page-link">{{ 'Page'|t }} {{ current }} / {{ items.pages|length }}</span></li>
       {% if items.next %}
         <li class="page-item">
           <a href="{{ items.next.href }}" title="{{ 'Next'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }} class="page-link">
-            <span>{{ 'Next'|t }} <i class="fa fa-arrow-right fa-sm ms-2"></i></span>
+            <span>{{ 'Next'|t }} <i class="fa-solid fa-arrow-right fa-sm ms-2"></i></span>
           </a>
         </li>
       {% else %}
         <li class="page-item disabled">
-          <span class="page-link">{{ 'Next'|t }} <i class="fa fa-arrow-right fa-sm ms-2"></i></span>
+          <span class="page-link">{{ 'Next'|t }} <i class="fa-solid fa-arrow-right fa-sm ms-2"></i></span>
         </li>
       {% endif %}
     </ul>

diff --git a/web/themes/custom/hoeringsportal/templates/newsletter-bottom-link.html.twig b/web/themes/custom/hoeringsportal/templates/newsletter-bottom-link.html.twig
@@ -1,5 +1,5 @@
 <div class="container bg-white d-flex flex-column flex-md-row newsletter-signup p-3 justify-content-md-around align-items-center row-gap-3">
-  <i class="fas fa-envelope fa-2x text-primary"></i>
+  <i class="fa-solid fa-envelope fa-2x text-primary"></i>
   <div>
     <h5 class="newsletter-signup--header p-0 m-0 h4">{{ 'Would you like a direct message when deltag.aarhus.dk has new content?'|t }}</h5>
     {{ '<a href="@sign_up_url">Sign up to our message service</a> and be informed about your interests'|t({'@sign_up_url': path('entity.node.canonical', {'node': node_newsletter})}) }}

diff --git a/...mes/custom/hoeringsportal/templates/node/_node--project-main-page--list-display.html.twig b/...mes/custom/hoeringsportal/templates/node/_node--project-main-page--list-display.html.twig
@@ -9,7 +9,7 @@
           {{ node.field_short_description.value }}
         </p>
         {{ content.field_area }}
-        <span class="activity-teaser-link "><i class="fa fa-arrow-right float-right"></i></span>
+        <span class="activity-teaser-link "><i class="fa-solid fa-arrow-right float-right"></i></span>
       </div>
     </a>
   </div>