Skip to content
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

Jump to bottom

MAINT: update icons to fit Fontawesome 6 #963

Merged
merged 9 commits into from Sep 29, 2022
Merged

MAINT: update icons to fit Fontawesome 6 #963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d2b7857
setup fontawesome 5 everywhere
12rambau Sep 29, 2022
5c767a9
use variable for all css defined icons
12rambau Sep 29, 2022
619750e
replace all fa5 icons by fa6
12rambau Sep 29, 2022
2eb72f5
update icon links definition
12rambau Sep 29, 2022
0c65ea1
set back moon to regular
12rambau Sep 29, 2022
32801e1
load regular fonts
12rambau Sep 29, 2022
d3bf951
prettify tests
12rambau Sep 29, 2022
b1b565f
add padding to the search icon
12rambau Sep 29, 2022
c9aed86
typo
12rambau Sep 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/conf.py
View file
Open in desktop
Expand Up @@ -116,7 +116,7 @@
{
"name": "PyPI",
"url": "https://pypi.org/project/pydata-sphinx-theme",
"icon": "fas fa-box",
"icon": "fa-solid fa-box",
},
{
"name": "PyData",
Expand Down
2 changes: 1 addition & 1 deletion docs/user_guide/fonts.rst
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@ Fonts and FontAwesome
=====================

The theme includes the `FontAwesome 6 Free <https://fontawesome.com/icons?m=free>`__
icon font (the ``.fa, .far, .fas`` styles, which are used for
icon font (the ``.fa-solid, .fa-regular, .fa-brands`` styles, which are used for
:ref:`icon links <icon-links>` and admonitions).
This is the only *vendored* font, and otherwise the theme by default relies on
available system fonts for normal body text and headers.
Expand Down
12 changes: 6 additions & 6 deletions docs/user_guide/header-links.rst
View file
Open in desktop
Expand Up @@ -59,7 +59,7 @@ These links take the following form:
# URL where the link will redirect
"url": "https://github.com/<your-org>/<your-repo>", # required
# Icon class (if "type": "fontawesome"), or path to local image (if "type": "local")
"icon": "fab fa-github-square",
"icon": "fa-brands fa-square-github",
# The type of image to be used (see below for details)
"type": "fontawesome",
}
Expand Down Expand Up @@ -91,7 +91,7 @@ specifying a FontAwesome class in the ``icon`` value.
The value of ``icon`` can be any full
`FontAwesome 6 Free <https://fontawesome.com/icons?d=gallery&m=free>`__ icon.
In addition to the main icon class, e.g. ``fa-cat``, the "style" class must
also be provided e.g. `fab` for *branding*, or `fas` for *solid*.
also be provided e.g. `fa-brands` for *branding*, or `fa-solid` for *solid*.

Here are several examples:

Expand All @@ -103,25 +103,25 @@ Here are several examples:
{
"name": "GitHub",
"url": "https://github.com/<your-org>/<your-repo>",
"icon": "fab fa-github-square",
"icon": "fa-brands fa-square-github",
"type": "fontawesome",
},
{
"name": "GitLab",
"url": "https://gitlab.com/<your-org>/<your-repo>",
"icon": "fab fa-gitlab",
"icon": "fa-brands fa-square-gitlab",
"type": "fontawesome",
},
{
"name": "Twitter",
"url": "https://twitter.com/<your-handle>",
"icon": "fab fa-twitter-square",
"icon": "fa-brands fa-square-twitter",
# The default for `type` is `fontawesome` so it is not actually required in any of the above examples as it is shown here
},
{
"name": "Mastodon",
"url": "https://<your-host>@<your-handle>",
"icon": "fab fa-mastodon",
"icon": "fa-brands fa-mastodon",
},
],
...
Expand Down
4 changes: 2 additions & 2 deletions src/pydata_sphinx_theme/__init__.py
View file
Open in desktop
Expand Up @@ -270,7 +270,7 @@ def generate_header_nav_html(n_links_before_dropdown=5):
links_html.append(
f"""
<li class="nav-item">
<a class="nav-link nav-external" href="{ external_link["url"] }">{ external_link["name"] }<i class="fas fa-external-link-alt"></i></a>
<a class="nav-link nav-external" href="{ external_link["url"] }">{ external_link["name"] }<i class="fa-solid fa-up-right-from-square"></i></a>
</li>""" # noqa
)

Expand Down Expand Up @@ -510,7 +510,7 @@ def _add_collapse_checkboxes(soup):
label = soup.new_tag(
"label", attrs={"for": checkbox_name, "class": "toctree-toggle"}
)
label.append(soup.new_tag("i", attrs={"class": "fas fa-chevron-down"}))
label.append(soup.new_tag("i", attrs={"class": "fa-solid fa-chevron-down"}))
if "toctree-l0" in classes:
# making label cover the whole caption text with css
label["class"] = "label-parts"
Expand Down
11 changes: 5 additions & 6 deletions src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss
View file
Open in desktop
Expand Up @@ -4,21 +4,20 @@

#navbar-icon-links {
i {
&.fa,
&.fab,
&.far,
&.fas {
&.fa-brands,
&.fa-regular,
&.fa-solid {
vertical-align: middle;
font-style: normal;
font-size: var(--pst-font-size-icon);
}

/* Social media buttons */
&.fa-twitter-square:before {
&.fa-square-twitter:before {
color: #55acee;
}

&.fa-gitlab:before {
&.fa-square-gitlab:before {
color: #548;
}

Expand Down
8 changes: 8 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/components/_search.scss
View file
Open in desktop
Expand Up @@ -13,6 +13,10 @@
left: 25px;
}

i.fa-solid.fa-magnifying-glass {
padding-right: 0.5rem;
}

input {
background-color: var(--pst-color-background);
border-radius: $admonition-border-radius;
Expand Down Expand Up @@ -86,6 +90,10 @@
margin-top: 0.5rem;
width: 90%;
max-width: 800px;

i.fa-solid.fa-magnifying-glass {
padding-right: 0.5rem;
}
}

.search-button__overlay {
Expand Down
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss
View file
Open in desktop
Expand Up @@ -53,7 +53,7 @@ span.versionmodified {
font-style: normal;
margin-right: 0.6rem;
color: var(--pst-color-info);
font-family: "Font Awesome 5 Free";
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: var(--pst-icon-versionmodified-default);
}
Expand Down
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
View file
Open in desktop
Expand Up @@ -45,7 +45,7 @@ div.admonition,
width: 1rem;
height: 1rem;
color: var(--pst-color-info);
font-family: "Font Awesome 5 Free";
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: var(--pst-icon-admonition-default);
opacity: 1;
Expand Down
4 changes: 2 additions & 2 deletions src/pydata_sphinx_theme/assets/styles/content/_spans.scss
View file
Open in desktop
Expand Up @@ -16,8 +16,8 @@ span.guilabel {
}

a.reference.download:before {
content: "\f019";
font-family: "Font Awesome 5 Free";
content: var(--pst-icon-download);
font-family: "Font Awesome 6 Free";
font-size: 0.8em;
font-weight: 600;
padding: 0 0.25em;
Expand Down
8 changes: 4 additions & 4 deletions src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss
View file
Open in desktop
Expand Up @@ -31,14 +31,14 @@ article.bd-article > section + div.section {
font-size: 1.2em;

span:first-child:before {
content: "\f104";
font-family: "Font Awesome 5 Free";
content: var(--pst-icon-angle-left);
font-family: "Font Awesome 6 Free";
font-weight: 800;
}

span:last-child:after {
content: "\f105";
font-family: "Font Awesome 5 Free";
content: var(--pst-icon-angle-right);
font-family: "Font Awesome 6 Free";
font-weight: 800;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
View file
Open in desktop
Expand Up @@ -185,9 +185,9 @@ nav.bd-links {

&.reference.external {
&:after {
font-family: "Font Awesome 5 Free";
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f35d";
content: var(--pst-icon-external-link);
font-size: 0.75em;
margin-left: 0.3em;
}
Expand Down
4 changes: 2 additions & 2 deletions src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
View file
Open in desktop
Expand Up @@ -63,8 +63,8 @@ div#searchbox {
// match padding to .toc-item > i above
// f010 is magnifying glass minus
&:before {
content: "\f010";
font-family: FontAwesome;
content: var(--pst-icon-search-minus);
font-family: "Font Awesome 6 Free";
padding-right: 0.5rem;
}
}
Expand Down
17 changes: 11 additions & 6 deletions src/pydata_sphinx_theme/assets/styles/variables/_icons.scss
View file
Open in desktop
Expand Up @@ -7,10 +7,15 @@
--pst-font-size-icon: 1.5rem;

// Font Awesome default icons
--pst-icon-check-circle: "\f058"; // fas fa-check-circle
--pst-icon-info-circle: "\f05a"; // fas fa-info-circle
--pst-icon-exclamation-triangle: "\f071"; // fas fa-exclamation-triangle
--pst-icon-exclamation-circle: "\f06a"; // fas fa-exclamation-circle
--pst-icon-times-circle: "\f057"; // fas fa-times-circle
--pst-icon-lightbulb: "\f0eb"; // fas fa-lightbulb
--pst-icon-check-circle: "\f058"; // fa-solid fa-circle-check
--pst-icon-info-circle: "\f05a"; // fa-solid fa-circle-info
--pst-icon-exclamation-triangle: "\f071"; // fa-solid fa-triangle-exclamation
--pst-icon-exclamation-circle: "\f06a"; // fa-solid fa-circle-exclamation
--pst-icon-times-circle: "\f057"; // fa-solid fa-circle-xmark
--pst-icon-lightbulb: "\f0eb"; // fa-solid fa-lightbulb
--pst-icon-download: "\f019"; // fa-solid fa-download
--pst-icon-angle-left: "\f104"; // fa-solid fa-angle-left
--pst-icon-angle-right: "\f105"; // fa-solid fa-angle-right
--pst-icon-external-link: "\f35d"; // fa-solid fa-up-right-from-square
--pst-icon-search-minus: "\f010"; // fa-solid fa-magnifying-glass-minus
}
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@
{% set src = sourcename.split('.') %}
<div class="tocsection editthispage">
<a href="{{ get_edit_url() }}">
<i class="fas fa-pencil-alt"></i> {{ _("Edit this page") }}
<i class="fa-solid fa-pencil"></i> {{ _("Edit this page") }}
</a>
</div>
{% endif %}
4 changes: 2 additions & 2 deletions src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@
<div class='prev-next-area'>
{%- if prev %}
<a class='left-prev' id="prev-link" href="{{ prev.link|e }}" title="{{ _('previous') }} {{ _('page') }}">
<i class="fas fa-angle-left"></i>
<i class="fa-solid fa-angle-left"></i>
<div class="prev-next-info">
<p class="prev-next-subtitle">{{ _("previous") }}</p>
<p class="prev-next-title">{{ prev_title or prev.title }}</p>
Expand All @@ -15,7 +15,7 @@
<p class="prev-next-subtitle">{{ _("next") }}</p>
<p class="prev-next-title">{{ next_title or next.title }}</p>
</div>
<i class="fas fa-angle-right"></i>
<i class="fa-solid fa-angle-right"></i>
</a>
{%- endif %}
</div>
8 changes: 4 additions & 4 deletions src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html
View file
Open in desktop
Expand Up @@ -28,10 +28,10 @@

<ul id="navbar-icon-links" class="navbar-nav" aria-label="{{ _(theme_icon_links_label) }}">
{%- block icon_link_shortcuts -%}
{{ icon_link_nav_item(theme_github_url, "fab fa-github-square", "GitHub", "fontawesome") -}}
{{ icon_link_nav_item(theme_gitlab_url, "fab fa-gitlab", "GitLab", "fontawesome") -}}
{{ icon_link_nav_item(theme_bitbucket_url, "fab fa-bitbucket", "Bitbucket", "fontawesome") -}}
{{ icon_link_nav_item(theme_twitter_url, "fab fa-twitter-square", "Twitter", "fontawesome") -}}
{{ icon_link_nav_item(theme_github_url, "fa-brands fa-square-github", "GitHub", "fontawesome") -}}
{{ icon_link_nav_item(theme_gitlab_url, "fa-brands fa-square-gitlab", "GitLab", "fontawesome") -}}
{{ icon_link_nav_item(theme_bitbucket_url, "fa-brands fa-bitbucket", "Bitbucket", "fontawesome") -}}
{{ icon_link_nav_item(theme_twitter_url, "fa-brands fa-square-twitter", "Twitter", "fontawesome") -}}
{% endblock -%}
{%- for icon_link in theme_icon_links -%}
{{ icon_link_nav_item(icon_link["url"], icon_link["icon"], icon_link["name"], icon_link.get("type", "fontawesome"), icon_link.get("attributes", {})) -}}
Expand Down
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html
View file
Open in desktop
Expand Up @@ -2,7 +2,7 @@

{%- if page_toc | length >= 1 %}
<div class="tocsection onthispage">
<i class="fas fa-list"></i> {{ _("On this page") }}
<i class="fa-solid fa-list"></i> {{ _("On this page") }}
</div>
<nav id="bd-toc-nav" class="page-toc">
{{ page_toc }}
Expand Down
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html
View file
Open in desktop
@@ -1,4 +1,4 @@
{# A button that, when clicked, will trigger a search popup overlay #}
<button class="btn btn-sm navbar-btn search-button search-button__button" title="{{ _('Search') }}" data-toggle="tooltip">
<i class="fas fa-search"></i>
<i class="fa-solid fa-magnifying-glass"></i>
</button>
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-field.html
View file
Open in desktop
@@ -1,6 +1,6 @@
{# A bootstrap-styled field that will direct to the `search.html` page when submitted #}
<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
<i class="icon fas fa-search"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<input type="search" class="form-control" name="q" id="search-input" placeholder="{{ _(theme_search_bar_text) }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
</form>
2 changes: 1 addition & 1 deletion src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sourcelink.html
View file
Open in desktop
@@ -1,7 +1,7 @@
{% if show_source and has_source and sourcename %}
<div class="tocsection sourcelink">
<a href="{{ pathto('_sources/' + sourcename, true)|e }}">
<i class="fas fa-file-alt"></i> {{ _("Show Source") }}
<i class="fa-solid fa-file-lines"></i> {{ _("Show Source") }}
</a>
</div>
{% endif %}
6 changes: 3 additions & 3 deletions src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html
View file
Open in desktop
@@ -1,5 +1,5 @@
<span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="{{ _('light/dark') }}" data-toggle="tooltip">
<a class="theme-switch" data-mode="light"><i class="fas fa-sun"></i></a>
<a class="theme-switch" data-mode="dark"><i class="far fa-moon"></i></a>
<a class="theme-switch" data-mode="auto"><i class="fas fa-adjust"></i></a>
<a class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></a>
<a class="theme-switch" data-mode="dark"><i class="fa-regular fa-moon"></i></a>
<a class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></a>
</span>
4 changes: 2 additions & 2 deletions src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html
View file
Open in desktop
@@ -1,6 +1,6 @@
<div class="bd-header__inner bd-page-width">
<label class="sidebar-toggle primary-toggle" for="__primary">
<span class="fas fa-bars"></span>
<span class="fa-solid fa-bars"></span>
</label>
<div id="navbar-start">
{% for navbar_item in theme_navbar_start %}
Expand Down Expand Up @@ -38,7 +38,7 @@

{% if not remove_sidebar_secondary %}
<label class="sidebar-toggle secondary-toggle" for="__secondary">
<span class="fas fa-outdent"></span>
<span class="fa-solid fa-outdent"></span>
</label>
{% endif %}

Expand Down
6 changes: 3 additions & 3 deletions tests/test_build/navbar_theme.html
View file
Open in desktop
@@ -1,14 +1,14 @@
<span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" data-toggle="tooltip" title="light/dark">
<a class="theme-switch" data-mode="light">
<i class="fas fa-sun">
<i class="fa-solid fa-sun">
</i>
</a>
<a class="theme-switch" data-mode="dark">
<i class="far fa-moon">
<i class="fa-regular fa-moon">
</i>
</a>
<a class="theme-switch" data-mode="auto">
<i class="fas fa-adjust">
<i class="fa-solid fa-circle-half-stroke">
</i>
</a>
</span>
6 changes: 3 additions & 3 deletions tests/test_build/sidebar_subpage.html
View file
Open in desktop
Expand Up @@ -30,15 +30,15 @@
<div class="navbar-end-item">
<span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" data-toggle="tooltip" title="light/dark">
<a class="theme-switch" data-mode="light">
<i class="fas fa-sun">
<i class="fa-solid fa-sun">
</i>
</a>
<a class="theme-switch" data-mode="dark">
<i class="far fa-moon">
<i class="fa-regular fa-moon">
</i>
</a>
<a class="theme-switch" data-mode="auto">
<i class="fas fa-adjust">
<i class="fa-solid fa-circle-half-stroke">
</i>
</a>
</span>
Expand Down
2 changes: 1 addition & 1 deletion tests/test_build/test_sidebars_captions.html
View file
Open in desktop
Expand Up @@ -15,7 +15,7 @@
</a>
<input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
<label class="toctree-toggle" for="toctree-checkbox-1">
<i class="fas fa-chevron-down">
<i class="fa-solid fa-chevron-down">
</i>
</label>
<ul>
Expand Down
2 changes: 1 addition & 1 deletion tests/test_build/test_sidebars_nested_page.html
View file
Open in desktop
Expand Up @@ -15,7 +15,7 @@
</a>
<input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
<label class="toctree-toggle" for="toctree-checkbox-1">
<i class="fas fa-chevron-down">
<i class="fa-solid fa-chevron-down">
</i>
</label>
<ul class="current">
Expand Down
4 changes: 4 additions & 0 deletions webpack.config.js
View file
Open in desktop
Expand Up @@ -75,6 +75,10 @@ function macroTemplate({ compilation }) {
href="{{ pathto('_static/vendor/fontawesome/${
vendorVersions.fontAwesome
}/webfonts/fa-brands-400.woff2', 1) }}">
<link rel="preload" as="font" type="font/woff2" crossorigin
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How were we able to use fa regular before if we weren't loading it with webpack? Shouldn't we also have to remove something?

Copy link
Collaborator Author

@12rambau 12rambau Sep 29, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's an excellent question, the only regular we were using was the moon icon of the theme switcher. the problem with fontawesome is that it's everywhere on the web so maybe we all cache it somewhere in our browser

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that seems like the most likely explanation.

href="{{ pathto('_static/vendor/fontawesome/${
vendorVersions.fontAwesome
}/webfonts/fa-regular-400.woff2', 1) }}">
{% endmacro %}

{% macro head_pre_assets() %}
Expand Down