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")
icon | 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. |
---|---|
style | 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 |
text | A string of the text to appear on the button |
url | A url for where the button should link to |
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.
John Paul Helveston and Ella Kaye
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("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>