From d2b7857cf1eef04502dfd444e82867c30555758f Mon Sep 17 00:00:00 2001 From: 12rambau Date: Thu, 29 Sep 2022 09:43:44 +0200 Subject: [PATCH 1/9] setup fontawesome 5 everywhere --- .../assets/styles/components/_versionmodified.scss | 2 +- .../assets/styles/content/_admonitions.scss | 2 +- src/pydata_sphinx_theme/assets/styles/content/_spans.scss | 2 +- src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss | 4 ++-- .../assets/styles/sections/_sidebar-primary.scss | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss index 40d160783..e99b0cf06 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_versionmodified.scss @@ -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); } diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss index 3e736b671..ed965cd8c 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss @@ -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; diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss index 139a7226e..587cf1b10 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss @@ -17,7 +17,7 @@ span.guilabel { a.reference.download:before { content: "\f019"; - font-family: "Font Awesome 5 Free"; + font-family: "Font Awesome 6 Free"; font-size: 0.8em; font-weight: 600; padding: 0 0.25em; diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss index afd0d1175..c207340cb 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss @@ -32,13 +32,13 @@ article.bd-article > section + div.section { span:first-child:before { content: "\f104"; - font-family: "Font Awesome 5 Free"; + font-family: "Font Awesome 6 Free"; font-weight: 800; } span:last-child:after { content: "\f105"; - font-family: "Font Awesome 5 Free"; + font-family: "Font Awesome 6 Free"; font-weight: 800; } } diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss index 6ce31e20f..ca542eb82 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss @@ -185,7 +185,7 @@ nav.bd-links { &.reference.external { &:after { - font-family: "Font Awesome 5 Free"; + font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f35d"; font-size: 0.75em; From 5c767a9d696b6cf291efeb40dd647a66a3182c88 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Thu, 29 Sep 2022 09:50:43 +0200 Subject: [PATCH 2/9] use variable for all css defined icons --- src/pydata_sphinx_theme/assets/styles/content/_spans.scss | 2 +- src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss | 4 ++-- .../assets/styles/sections/_sidebar-primary.scss | 2 +- .../assets/styles/sections/_sidebar-secondary.scss | 4 ++-- src/pydata_sphinx_theme/assets/styles/variables/_icons.scss | 5 +++++ 5 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss index 587cf1b10..9c9a39e1c 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss @@ -16,7 +16,7 @@ span.guilabel { } a.reference.download:before { - content: "\f019"; + content: var(--pst-icon-download); font-family: "Font Awesome 6 Free"; font-size: 0.8em; font-weight: 600; diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss index c207340cb..4ab514249 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_ablog.scss @@ -31,13 +31,13 @@ article.bd-article > section + div.section { font-size: 1.2em; span:first-child:before { - content: "\f104"; + content: var(--pst-icon-angle-left); font-family: "Font Awesome 6 Free"; font-weight: 800; } span:last-child:after { - content: "\f105"; + content: var(--pst-icon-angle-right); font-family: "Font Awesome 6 Free"; font-weight: 800; } diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss index ca542eb82..39d54ff5f 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss @@ -187,7 +187,7 @@ nav.bd-links { &:after { 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; } diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss index 37459a557..efc2724ad 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss @@ -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; } } diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss b/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss index 4b3046c9b..fa3518d96 100644 --- a/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss +++ b/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss @@ -13,4 +13,9 @@ --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-download: "\f019"; // fas fa-download + --pst-icon-angle-left: "\f104"; // fas fa-angle-left + --pst-icon-angle-right: "\f105"; // fas fa-angle-right + --pst-icon-external-link: "\f35d"; // fas fa-external-link-alt + --pst-icon-search-minus: "\f010"; // fas fa-search-minus } From 619750e192763e4187b7299b9acf1d91cf05b447 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Thu, 29 Sep 2022 10:50:38 +0200 Subject: [PATCH 3/9] replace all fa5 icons by fa6 --- docs/conf.py | 2 +- docs/user_guide/fonts.rst | 2 +- docs/user_guide/header-links.rst | 12 +++++----- src/pydata_sphinx_theme/__init__.py | 4 ++-- .../assets/styles/variables/_icons.scss | 22 +++++++++---------- .../components/edit-this-page.html | 2 +- .../components/footer-article/prev-next.html | 4 ++-- .../components/icon-links.html | 8 +++---- .../components/page-toc.html | 2 +- .../components/search-button.html | 2 +- .../components/search-field.html | 2 +- .../components/sourcelink.html | 2 +- .../components/theme-switcher.html | 6 ++--- .../pydata_sphinx_theme/sections/header.html | 4 ++-- tests/test_build/navbar_theme.html | 6 ++--- tests/test_build/sidebar_subpage.html | 9 +++----- tests/test_build/test_sidebars_captions.html | 2 +- .../test_build/test_sidebars_nested_page.html | 2 +- 18 files changed, 45 insertions(+), 48 deletions(-) diff --git a/docs/conf.py b/docs/conf.py index 8f4561d96..582d51e14 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -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", diff --git a/docs/user_guide/fonts.rst b/docs/user_guide/fonts.rst index 5e2bb47ad..1b5e35e87 100644 --- a/docs/user_guide/fonts.rst +++ b/docs/user_guide/fonts.rst @@ -2,7 +2,7 @@ Fonts and FontAwesome ===================== The theme includes the `FontAwesome 6 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 ` 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. diff --git a/docs/user_guide/header-links.rst b/docs/user_guide/header-links.rst index 0c46ef22b..95f302c07 100644 --- a/docs/user_guide/header-links.rst +++ b/docs/user_guide/header-links.rst @@ -59,7 +59,7 @@ These links take the following form: # URL where the link will redirect "url": "https://github.com//", # 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", } @@ -91,7 +91,7 @@ specifying a FontAwesome class in the ``icon`` value. The value of ``icon`` can be any full `FontAwesome 6 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: @@ -103,25 +103,25 @@ Here are several examples: { "name": "GitHub", "url": "https://github.com//", - "icon": "fab fa-github-square", + "icon": "fa-brands fa-square-github", "type": "fontawesome", }, { "name": "GitLab", "url": "https://gitlab.com//", - "icon": "fab fa-gitlab", + "icon": "fa-brands fa-square-gitlab", "type": "fontawesome", }, { "name": "Twitter", "url": "https://twitter.com/", - "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://@", - "icon": "fab fa-mastodon", + "icon": "fa-brands fa-mastodon", }, ], ... diff --git a/src/pydata_sphinx_theme/__init__.py b/src/pydata_sphinx_theme/__init__.py index 48220d231..724d70c32 100644 --- a/src/pydata_sphinx_theme/__init__.py +++ b/src/pydata_sphinx_theme/__init__.py @@ -270,7 +270,7 @@ def generate_header_nav_html(n_links_before_dropdown=5): links_html.append( f"""
  • - { external_link["name"] } + { external_link["name"] }
    • """ # noqa ) @@ -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" diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss b/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss index fa3518d96..3cbbb22c4 100644 --- a/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss +++ b/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss @@ -7,15 +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-download: "\f019"; // fas fa-download - --pst-icon-angle-left: "\f104"; // fas fa-angle-left - --pst-icon-angle-right: "\f105"; // fas fa-angle-right - --pst-icon-external-link: "\f35d"; // fas fa-external-link-alt - --pst-icon-search-minus: "\f010"; // fas fa-search-minus + --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 } diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html index 186a7ff61..947d64200 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html @@ -2,7 +2,7 @@ {% set src = sourcename.split('.') %}
    - {{ _("Edit this page") }} + {{ _("Edit this page") }}
    {% endif %} diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html index 8ffdfba8b..19247575a 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html @@ -2,7 +2,7 @@
    {%- if prev %} - +

    {{ _("previous") }}

    {{ prev_title or prev.title }}

    @@ -15,7 +15,7 @@

    {{ _("next") }}

    {{ next_title or next.title }}

    - +     {%- endif %}
    diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html index 144071137..98ecbc08f 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html @@ -28,10 +28,10 @@