Skip to content

Replace global FontAwesome with icon snippet #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dabrorius merged 1 commit into from
Aug 3, 2026
Merged

Replace global FontAwesome with icon snippet #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
box-sizing: border-box;
}

/* Excludes <i> so host-injected icon fonts (e.g. .bq-icon-cart) aren't overridden. */
*:not(i),
*:not(i)::before,
*:not(i)::after {
Expand All @@ -45,6 +46,25 @@ body {
overflow-wrap: anywhere;
}

/* Inline SVG icons (snippets/icon.liquid); 1em so they scale with font-size. */
.icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
fill: currentColor;
flex-shrink: 0;
}

.icon--spin {
animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* Overriding redactor implementation of separator */
hr::before, hr::after {
border-top-color: var(--color-grey-light) !important;
Expand Down
2 changes: 1 addition & 1 deletion assets/core.min.css
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 6 additions & 4 deletions assets/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,13 @@
justify-content: flex-end;
}

.footer__payment-methods i {
.footer__payment-methods .icon {
color: var(--color-primary-foreground);

font-size: 32px;
width: 32px;
height: 32px;

margin: 0 4px 4px;
}

.footer__payment-methods svg {
Expand All @@ -115,8 +118,7 @@
width: 100%;
}

.footer__payment-methods span[title],
.footer__payment-methods i {
.footer__payment-methods span[title] {
margin: 0 4px 4px;
display: inline-flex;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions assets/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,14 @@
align-items: center;
}

.form__info i {
.form__info .icon {
font-size: 16px;
line-height: 20px;

margin-right: 5px;
}

.form__info .success i {
.form__info .success .icon {
color: var(--color-accent-background);
}

Expand Down
7 changes: 4 additions & 3 deletions assets/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@
width: 12px;
border-radius: 50%;
background-color: var(--color-primary-foreground);
background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg)
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='%23140202'/%3E%3Cpath d='M336 176L176 336M176 176L336 336' stroke='white' stroke-width='40' stroke-linecap='round'/%3E%3C/svg%3E")
no-repeat 50% 50%;
background-size: contain;
opacity: 0;
Expand Down Expand Up @@ -395,12 +395,13 @@
color: var(--color-accent-foreground) !important;
}

.header-cart bq-mini-cart[initialized="true"] + i {
.header-cart:has([initialized="true"]) .header-cart__spinner {
display: none;
}

.header-cart .fa-spinner-third {
.header-cart .header-cart__spinner {
color: var(--color-primary-foreground);
font-size: 24px;
}

.header-cart .bq-icon-cart::before {
Expand Down
2 changes: 1 addition & 1 deletion assets/pagination.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
margin: 20px auto;
}

.pagination i {
.pagination .icon {
font-size: 14px;
}

Expand Down
4 changes: 2 additions & 2 deletions assets/sidebar-navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
cursor: pointer;
}

.sidebar-navigation__close i {
.sidebar-navigation__close .icon {
font-size: 16px;

color: var(--color-primary-foreground);
Expand Down Expand Up @@ -136,7 +136,7 @@
color: var(--color-accent-background);
}

.sidebar-navigation-menu__link--current i {
.sidebar-navigation-menu__link--current .icon {
margin-right: 5px;
}

Expand Down
1 change: 0 additions & 1 deletion layout/checkout.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Booqable" />

<script src="https://kit.fontawesome.com/ff3b3de2b5.js" crossorigin="anonymous"></script>
{{ content_for_checkout_header }}

{% render 'fonts', settings: settings %}
Expand Down
2 changes: 0 additions & 2 deletions layout/minimal.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@
{{ "header.css" | asset_url | stylesheet_tag }}
{{ "date-picker.css" | asset_url | stylesheet_tag }}
{% endunless %}
{% comment %} Fonts {% endcomment %}
<script src="https://kit.fontawesome.com/ff3b3de2b5.js" crossorigin="anonymous"></script>

{% if section_preview %}
{{ options_and_scripts }}
Expand Down
2 changes: 0 additions & 2 deletions layout/session.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
{{ "base.css" | asset_url | stylesheet_tag }}
{{ "sessions-layout.css" | asset_url | stylesheet_tag }}
{{ "header.css" | asset_url | stylesheet_tag }}
{% comment %} Fonts {% endcomment %}
<script src="https://kit.fontawesome.com/ff3b3de2b5.js" crossorigin="anonymous"></script>
{{ content_for_header }}

{% render 'fonts', settings: settings %}
Expand Down
2 changes: 0 additions & 2 deletions layout/theme.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
<meta name="generator" content="Booqable" />
{% comment %} Base stylesheets {% endcomment %}
{{ "core.min.css" | asset_url | stylesheet_tag }}
{% comment %} Fonts {% endcomment %}
<script src="https://kit.fontawesome.com/ff3b3de2b5.js" crossorigin="anonymous"></script>
{{ content_for_header }}

{% render 'fonts', settings: settings %}
Expand Down
2 changes: 1 addition & 1 deletion sections/activate-account.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="account">

<div class="account__title-icon">
<i class="fa-solid fa-badge-check breadcrumbs__chevron"></i>
{% render 'icon', name: 'badge-check', style: 'solid', class: 'breadcrumbs__chevron' %}
</div>

<h3 class="account__title account__title--centered">
Expand Down
12 changes: 6 additions & 6 deletions sections/footer.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@
{% for provider in payment_methods %}
{% case provider %}
{% when "paypal" %}
<i class="fa-brands fa-cc-paypal" title="PayPal"></i>
{% render 'icon', name: 'cc-paypal', style: 'brands', title: 'PayPal' %}
{% when "creditcard" %}
<i class="fa-brands fa-cc-visa" title="Visa"></i>
<i class="fa-brands fa-cc-mastercard" title="MasterCard"></i>
<i class="fa-brands fa-cc-amex" title="American Express"></i>
{% render 'icon', name: 'cc-visa', style: 'brands', title: 'Visa' %}
{% render 'icon', name: 'cc-mastercard', style: 'brands', title: 'MasterCard' %}
{% render 'icon', name: 'cc-amex', style: 'brands', title: 'American Express' %}
{% when "ideal" %}
<i class="fa-brands fa-ideal" title="iDEAL"></i>
{% render 'icon', name: 'ideal', style: 'brands', title: 'iDEAL' %}
{% when "alipay" %}
<i class="fa-brands fa-alipay" title="Alipay"></i>
{% render 'icon', name: 'alipay', style: 'brands', title: 'Alipay' %}
{% when "p24" %}
{% include "p24-icon" %}
{% when "eps" %}
Expand Down
12 changes: 6 additions & 6 deletions sections/header.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
.header-search__icon,
.header-floating-menu__icon,
.header__nav .list-menu__item .list-menu__item-caret,
.header-cart .fa-spinner-third,
.header-cart .header-cart__spinner,
.header__link img {
color: {{ section.settings.foreground_color }};
}
Expand Down Expand Up @@ -91,16 +91,16 @@
<div class="header-search">
<input type="checkbox" id="floating-search">
<label for="floating-search" class="header-search__trigger">
<i class="fa-light fa-magnifying-glass header-search__icon open"></i>
{% render 'icon', name: 'magnifying-glass', style: 'light', class: 'header-search__icon open' %}
Comment thread
dabrorius marked this conversation as resolved.
</label>
<div class="header-search__wrapper">
<form id="search" action="{{ routes.search_url }}" role="search">
<div class="header-search__input-wrapper">
<i class="fa-light fa-magnifying-glass header-search__icon"></i>
{% render 'icon', name: 'magnifying-glass', style: 'light', class: 'header-search__icon' %}
<input type="search" name="q" class="header-search__input" placeholder="{{ "store.search_products" | user_t }}">
</div>
<label class="header-search__trigger" for="floating-search">
<i class="fa-light fa-xmark header-search__icon close"></i>
{% render 'icon', name: 'xmark', style: 'light', class: 'header-search__icon close' %}
</label>
</form>
</div>
Expand All @@ -109,14 +109,14 @@
{% if show_mini_cart %}
<div class="header-cart">
{{ cart_button }}
<i class="fa-regular fa-spinner-third fa-spin"></i>
{% render 'icon', name: 'spinner-third', style: 'regular', class: 'header-cart__spinner icon--spin' %}
</div>
{% endif %}

{% if collections_size > 0 %}
<div class="collection-floating-menu">
<button class="header-collection-floating-menu__trigger" onclick="handleOpenCollectionMenu()">
<i class="fa-regular fa-bars header-collection-floating-menu__icon open"></i>
{% render 'icon', name: 'bars', style: 'regular', class: 'header-collection-floating-menu__icon open' %}
Comment thread
dabrorius marked this conversation as resolved.
</button>
</div>
{% endif %}
Expand Down
2 changes: 1 addition & 1 deletion sections/product-page.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<a href="{{ routes.root_url }}" class="bq-breadcrumb">
<i class="fa-solid fa-chevron-left"></i> {{ "store.home" | user_t | default: "Home" }}
{% render 'icon', name: 'chevron-left', style: 'solid' %} {{ "store.home" | user_t | default: "Home" }}
</a>
<div class="product-page__layout">
{% if canonical_url contains "/1?" or canonical_url contains "/1#" %}
Expand Down
2 changes: 1 addition & 1 deletion sections/reset-password-form.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="account">
<a href="{{ routes.login_url }}" class="breadcrumbs">
<i class="fa-regular fa-chevron-left breadcrumbs__chevron"></i>
{% render 'icon', name: 'chevron-left', style: 'regular', class: 'breadcrumbs__chevron' %}
{{ "auth.forgot_password.back" | user_t }}
</a>

Expand Down
2 changes: 1 addition & 1 deletion sections/search.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

{% if results_count > 0 %}
<a href="{{ routes.root_url }}" class="bq-breadcrumb">
<i class="fa-solid fa-chevron-left"></i> {{ "store.home" | user_t | default: "Home" }}
{% render 'icon', name: 'chevron-left', style: 'solid' %} {{ "store.home" | user_t | default: "Home" }}
</a>
<h1 class="search__title">{{ section.settings.search_results_title }} “{{ query }}”</h1>
{% endif %}
Expand Down
6 changes: 3 additions & 3 deletions snippets/collection-navigation.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% if mode == "mobile" %}
<div class="sidebar-navigation__header">
<button class="sidebar-toggle sidebar-navigation__close" onclick="handleOpenCollectionMenu()">
<i class="fa-regular fa-xmark"></i>
{% render 'icon', name: 'xmark', style: 'regular' %}
Comment thread
dabrorius marked this conversation as resolved.
</button>
</div>
{% endif %}
Expand All @@ -24,7 +24,7 @@
<span class="list-menu__item-wrapper">
{% if collection.has_children %}
<label for="sidebar-navigation-menu-child-{{collection.id}}{% if mode == "mobile" %}-mobile{% endif %}">
<i class="{% if current_url == url %}fa-solid fa-angle-down{% else %}fa-regular fa-angle-down{% endif %} list-menu__item-caret"></i>
{% if current_url == url %}{% render 'icon', name: 'angle-down', style: 'solid', class: 'list-menu__item-caret' %}{% else %}{% render 'icon', name: 'angle-down', style: 'regular', class: 'list-menu__item-caret' %}{% endif %}
Comment thread
dabrorius marked this conversation as resolved.
</label>
{% endif %}
<a href="{{ url }}" class="sidebar-navigation-menu__link {% if current_url == url %}sidebar-navigation-menu__link--current{% endif %} {% if collection.has_children %} sidebar-navigation-menu__link--with-children{% endif %}">
Expand All @@ -42,7 +42,7 @@
<span class="list-menu__item-wrapper">
{% if child_collection.has_children %}
<label for="sidebar-navigation-menu-grandchild-{{child_collection.id}}{% if mode == "mobile" %}-mobile{% endif %}">
<i class="{% if current_url == url %}fa-solid fa-angle-down{% else %}fa-regular fa-angle-down{% endif %} list-menu__item-caret"></i>
{% if current_url == url %}{% render 'icon', name: 'angle-down', style: 'solid', class: 'list-menu__item-caret' %}{% else %}{% render 'icon', name: 'angle-down', style: 'regular', class: 'list-menu__item-caret' %}{% endif %}
</label>
{% endif %}
<a href="{{ url }}" class="sidebar-navigation-menu__link {% if url == current_url %}sidebar-navigation-menu__link--current{% endif %}">
Expand Down
4 changes: 2 additions & 2 deletions snippets/form.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@
<div class="form__info">
{% if form.posted_successfully %}
<p class="success">
<i class="fa-solid fa-circle-check"></i> {{ section.settings.success_message }}
{% render 'icon', name: 'circle-check', style: 'solid' %} {{ section.settings.success_message }}
</p>
{% endif %}
{% if form.errors != blank %}
<p class="error">
<i class="fa-solid fa-circle-exclamation"></i> {{ section.settings.error_message }}
{% render 'icon', name: 'circle-exclamation', style: 'solid' %} {{ section.settings.error_message }}
</p>
{% endif %}
</div>
Expand Down
Loading