[Answered ]-Sphinx Readthedocs theme Font-awesome integration

by

2👍

✅

You can use Sphinx’s rst-class directive, as follows:

.. rst-class:: fa fa-fontawesome

   the font awsome flag will be attached to this paragraph

rst-class will set the class attribute for the next element as specified.

The following code renders only the icon:

.. rst-class:: fa fa-font-awesome

   |

Of course, you can also use custom classes to further style the element.

👤Timotheus.Kampik

1👍

You can also use https://sphinx-panels.readthedocs.io/en/latest/#inline-icons:

:fa:`bars`
:fa:`spinner,text-white bg-primary fa-2x,style=fa`
👤Chris Sewell

0👍

I am just learning Sphinx and had the same question, but using raw HTML is fine for my case. Maybe this solution will be helpful to someone out there…

In the conf.py file, add a link to your Fontawesome Kit Code URL

html_js_files = [
    'https://kit.fontawesome.com/##########.js',
]

Then, use fontawesome icons in Sphinx with the raw HTML directive

.. |fa-fort-awesome| raw:: html

   <i class="fab fa-fort-awesome"></i>

Here is some text |fa-fort-awesome| with the icon in the middle.

Here is how it renders as HTML…

enter image description here

👤blaylockbk

-1👍

In order to make the icons available on HTML and Latex download FontAwesome Web Package from https://fontawesome.com/download, include font-awesome/svgs/solid into your project _static folder and make use of image directives like bellow:

The |fa-bars| function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.

.. |fa-bars| image:: _static/font-awesome/svgs/solid/bars.svg
:width: 20px
:alt: hamburguer button

Results:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
The <i class="fa fa-bars"></i> function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.
👤Kleber Molica

Leave a comment