Example of sphinxcontrib.linkattr with Font Awesome

Homepage

Demo

• external link: Font Awesome

• internal link: Subpage

Contents:

• Subpage

Other Demos

• *open in new tab* link

• *open in new tab* link with a svg image icon

---

From README.md

A Sphinx extension, which overrides attributes of internal/external links.

• tests/fontawesome/: (demo: this page)

  An example of the usage of linkattr_suffix_external as a doctutils.nodes object, which has a Font Awesome icon.

  • In conf.py

    html_static_path = ['_static', '_static/css', '_static/webfonts']
    html_css_files   = ['css/fontawesome-all.css', 'custom.css']
    extensions += ['sphinxcontrib.linkattr']
    linkattr_suffix_external = dict(node='raw', format='html',
                                    text='<i class="fas fa-external-link-alt"></i>')
    

  • In _static/custom.css

    i.fas.fa-external-link-alt {
        color: #AAAAAA;
        font-size: 0.8em;
        letter-spacing: 0.2em;
        margin-left: 0.2em;
    }
    

  • You will need to download fontawesome-*.zip and place css/fontawesome-all.css and webfonts/* into _static/ (See also Hosting Font Awesome Yourself).