Example of sphinxcontrib.linkattr with a background image

Homepage

Demo

• external link: Scalable Vector Graphics (SVG)

• 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/backgroundimage/: (demo: this page)

  An example of the usage of css with .external class and background-image attribute. This is inspired by the method Wikipedia employs.

  • In conf.py

    extensions += ['sphinxcontrib.linkattr']
    

  • In _static/custom.css

    .external {
        background-image: url(external_link.svg);
        background-position: center right;
        background-repeat: no-repeat;
        background-size:   16px, 16px;
        padding-right:     16px;
    }
    

  • You will need to place an image file as _static/external_link.svg.