Create an icon

Create an icon for use within a page. Icons can appear on their own, inside of a button, and/or used with tabPanel() and navbarMenu().

icon(name, class = NULL, lib = "font-awesome", ...)

Arguments

name	The name of the icon. A name from either Font Awesome (when lib="font-awesome") or Bootstrap Glyphicons (when lib="glyphicon") may be provided. Note that the "fa-" and "glyphicon-" prefixes should not appear in name (i.e., the "fa-calendar" icon should be referred to as "calendar"). A name of NULL may also be provided to get a raw <i> tag with no library attached to it.
class	Additional classes to customize the style of an icon (see the usage examples for details on supported styles).
lib	The icon library to use. Either "font-awesome" or "glyphicon".
...	Arguments passed to the <i> tag of htmltools::tags.

Value

An <i> (icon) HTML tag.

See also

For lists of available icons, see https://fontawesome.com/icons and https://getbootstrap.com/docs/3.3/components/#glyphicons

Examples

# add an icon to a submit button
submitButton("Update View", icon = icon("redo"))
#> <div>
#>   <button type="submit" class="btn btn-primary">
#>     <i class="fa fa-redo" role="presentation" aria-label="redo icon"></i>
#>     Update View
#>   </button>
#> </div>

navbarPage("App Title",
  tabPanel("Plot", icon = icon("bar-chart-o")),
  tabPanel("Summary", icon = icon("list-alt")),
  tabPanel("Table", icon = icon("table"))
)
#> This Font Awesome icon ('bar-chart-o') does not exist:
#> * if providing a custom `html_dependency` these `name` checks can 
#>   be deactivated with `verify_fa = FALSE`
#> <nav class="navbar navbar-default navbar-static-top" role="navigation">
#>   <div class="container-fluid">
#>     <div class="navbar-header">
#>       <span class="navbar-brand">App Title</span>
#>     </div>
#>     <ul class="nav navbar-nav" data-tabsetid="8555">
#>       <li class="active">
#>         <a href="#tab-8555-1" data-toggle="tab" data-bs-toggle="tab" data-value="Plot">
#>           <i aria-label="bar-chart-o icon" class="fa fa-bar-chart-o fa-fw" role="presentation"></i>
#>           Plot
#>         </a>
#>       </li>
#>       <li>
#>         <a href="#tab-8555-2" data-toggle="tab" data-bs-toggle="tab" data-value="Summary">
#>           <i aria-label="list-alt icon" class="fa fa-list-alt fa-fw" role="presentation"></i>
#>           Summary
#>         </a>
#>       </li>
#>       <li>
#>         <a href="#tab-8555-3" data-toggle="tab" data-bs-toggle="tab" data-value="Table">
#>           <i aria-label="table icon" class="fa fa-table fa-fw" role="presentation"></i>
#>           Table
#>         </a>
#>       </li>
#>     </ul>
#>   </div>
#> </nav>
#> <div class="container-fluid">
#>   <div class="tab-content" data-tabsetid="8555">
#>     <div class="tab-pane active" data-icon-class="fa fa-bar-chart-o fa-fw" data-value="Plot" id="tab-8555-1"></div>
#>     <div class="tab-pane" data-value="Summary" data-icon-class="fa fa-list-alt fa-fw" id="tab-8555-2"></div>
#>     <div class="tab-pane" data-value="Table" data-icon-class="fa fa-table fa-fw" id="tab-8555-3"></div>
#>   </div>
#> </div>