Download Icon Missing when called with ":download:"
Describe the bug
context
I recently switched my theme from "sphinx-rtd-theme" to "sphinx-book-theme". I really like it so far! One thing I can't figure out though is how to get inline icons to appear. For example, in the previous sphinx-rtd-theme a download icon would appear next to anything marked as :download:.
expectation
When I include :download: I expect to see a "download icon" to appear . For instance, in the documentation for sphinx-rtd-theme you'll see the inline icon (red circle):
But for the book-theme the icon is missing:
problem This is a problem because it does not draw people's attention as effectively to links that contain downloadable content.
Reproduce the bug
An example of this bug is on sphinx-book-theme's documentation on including download links here.
You can reproduce this example by entering the following in a .rst file if your site is using the sphinx-book-theme:
:download:`The download link should be blue, normal weight text with a leading icon, and should wrap white-spaces <static/yi_jing_01_chien.jpg>`
List your environment
Running latest version of sphinx-book-theme. My site is hosted on ReadTheDocs.io. MacOS Monterey 15.4. Browsers: Safari and Firefox.
Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:
I've tried digging deeper into this issue, but it's beyond the scope of my abilities. It appears that a rule is missing in one of the stylesheets that won't automatically include the icon if :download: is called in an .rst file. I tried adding the following rule to no avail:
.fa-download::before, .rst-content code.download span:first-child::before, .rst-content tt.download span:first-child::before {
content: "\f019";
}
The below code sort of worked, but displayed a corrupted image:
span.pre:before {
padding-right: 4px;
content: "\f019";
}
Unfortuantely, I don't know enough css to be able to effectively troubleshoot this more.
In the meantime, I've found a temporary solution of implementing spinx-icon (docs link) and including the following code for download links:
:icon:`fas fa-download` :download:`Download File <../path/to/file.pdf>`
It's a bit cumbersome, but it's a quick and dirty fix.
@sieler ahh I think that you need to explicitly set the Font Family and weight and it should work. How about:
a.download.external:before {
content: "\f019";
font-weight: 600;
font-family: 'Font Awesome 5 Free';
padding-right: 0.5em;
}
I opened a PR to fix this upstream:
- https://github.com/pydata/pydata-sphinx-theme/pull/850
Thanks for responding to my issue. I know it isn't a huge issue to be tackled, so I appreciate it. Here are some things I've tried:
I've added that chunk of code to my custom.css file, but I'm still not seeing the download icon appear.
Below is the code in my .rst file. The first line with :download: is my workaround that works, and the second is the original code used for download links that doesn't work as expected.
Download
--------
:icon:`fas fa-download` :download:`Resume (one page) <../pathname/to/document.pdf>`
:download:`Test <../pathname/to/document.pdf>`
This is the result:
Perhaps the issue is with my custom.css file, but other edits I've made to that document are working on my site.
Hi Michael,
I received the email (below), apparently from you.
I don't know you, nor anything about the project you're discussing.
You (or someone) probably typo'd your email address. I'm @.***" (various "..."), and I'd hazard a guess that you're something like "msieler@ ...".
Please address this if you can. BTW, it's probably something you registered on github (and, yes, I also have a github account).
thanks,
Stan Sieler ... probably relative. (Feel free to email me if you want to discuss genealogy)
On Thu, Jul 28, 2022 at 8:00 AM 'Michael Sieler' via _gr_allegrosupport_fw_sieler @.***> wrote:
Thanks for responding to my issue. I know it isn't a huge issue to be tackled, so I appreciate it. Here are some things I've tried:
I've added that chunk of code to my custom.css file, but I'm still not seeing the download icon appear.
Below is the code in my .rst file https://github.com/sielerjm/michaelsieler/blob/master/Experience/experience.rst. The first line with :download: is my workaround, and the second is the original code used for download links https://sphinx-book-theme.readthedocs.io/en/stable/reference/kitchen-sink/paragraph-markup.html#download-links .
Download
:icon:
fas fa-download:download:Resume (one page) <../pathname/to/document.pdf>:download:Test <../pathname/to/document.pdf>This is the result:
[image: image] https://user-images.githubusercontent.com/37987642/181569229-5c204252-3003-4999-a827-827a0b5776f2.png
Perhaps the issue is with my custom.css https://github.com/sielerjm/michaelsieler/blob/master/_static/css/custom.css file, but other edits I've made to that document are working on my site.
— Reply to this email directly, view it on GitHub https://github.com/executablebooks/sphinx-book-theme/issues/594#issuecomment-1198269969, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAL5OHJZYNXOLPLIWFLPA2DVWKOCRANCNFSM54IEZQTA . You are receiving this because you were mentioned.Message ID: @.***>
@sieler
They mistagged me, that's all. My github name is sielerjm and yours is sieler.
Take care.
thanks!
On Thu, Jul 28, 2022 at 1:24 AM 'Chris Holdgraf' via _gr_allegrosupport_fw_sieler @.***> wrote:
I opened a PR to fix this upstream:
- pydata/pydata-sphinx-theme#850 https://github.com/pydata/pydata-sphinx-theme/pull/850
— Reply to this email directly, view it on GitHub https://github.com/executablebooks/sphinx-book-theme/issues/594#issuecomment-1197825271, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAL5OHMUDU2F7FITMOODH7DVWI7UHANCNFSM54IEZQTA . You are receiving this because you were mentioned.Message ID: @.***>
this one should now be fixed upstream!