Easily insert "buttons" with an icon and text into .Rmd documents
make_icon(icon, style = "default")
icon_link(
icon = NULL,
text = NULL,
url = NULL,
style = "default",
class = "icon-link",
target = "_blank",
rel = "noopener"
)The name of the icon. For Font Awesome icons, the name should correspond to the current Version 5 name and can either be the the short name (e.g. "github") or the full name (e.g. "fab fa-github"). Academicons can also be used and styled the same way (e.g. "google-scholar" or "ai ai-google-scholar") but require a site header. See here for details.
The style of the font awesome icon, which can be "default", "solid" or "regular". This parameter is only used when the short name of the icon is used in the icon argument and there is more than one style available for that icon. In that case, the default becomes "solid".
A string of the text to appear on the button.
A url for where the button should link to.
A string to define a class, defaults to "icon-link".
A string to define a target, typically "_blank", "_self",
A string to define the rel attribute, defaults to "noopener"
"_parent", or "_top". Defaults to "_blank".
For make_icon, a shiny.tag with the HTML <i class = "icon"></i>. For icon_link, a shiny.tag with the HTML <a href=url class="icon-link" target = "_blank" rel = "noopener"><i class=icon></i> text</a>
Note that it will be necessary to add some CSS to in order to make the "buttons" look like buttons. For the icon_link function, this can be done by styling the icon-link class. At a minimum, a border property should be set. For a distill website, we recommend using the distill::create_theme() function and writing additional CSS at the bottom of that file. See here for details of how to implement that. See here and here for examples.
The make_icon function returns an <i> tag, rather than the svg of the icon. This function is designed primarily to be called within icon_link, so we use the tag rather than the image directly to enable styling by css (in particular that the icon styling can change if hovered over). If you wish to insert an icon directly into your text or into a site header or footer, we recommend using a package that inserts the svg, such as fontawesome or icons. This ensures that the icons render offline, and there are also additional styling options available.
There are three short icon names that appear in both font awesome and academicons. They are "mendeley", "orcid" and "researchgate". These functions default to the font awesome versions (since font awesome should work out-the-box with distill whereas academicons needs the stylesheet adding - see above), but the academicon versions can be accessed by using their full name, e.g. "ai ai-orcid". Note that in early testing the font awesome icons for "orcid" and "mendeley" were troublesome for one of the authors, but the academicon versions worked fine.
make_icon("images")
#> <i class="fas fa-images"></i>
make_icon("fas fa-images")
#> <i class="fas fa-images"></i>
make_icon("far fa-images")
#> <i class="far fa-images"></i>
make_icon("images", style = "regular")
#> <i class="far fa-images"></i>
icon_link("github", "materials", "https://github.com/USER/REPO")
#> <a href="https://github.com/USER/REPO" class="icon-link" target="_blank" rel="noopener"><i class="fab fa-github"></i> materials</a>
icon_link("mastodon", "mastodon", "https://mastodon.social/@my_profile", rel = "me")
#> <a href="https://mastodon.social/@my_profile" class="icon-link" target="_blank" rel="me"><i class="fab fa-mastodon"></i> mastodon</a>
icon_link("images", "slides", "https://USER.github.io/slides", style = "regular")
#> <a href="https://USER.github.io/slides" class="icon-link" target="_blank" rel="noopener"><i class="far fa-images"></i> slides</a>