icon: Create an icon

Description Usage Arguments Value See Also Examples

View source: R/bootstrap.R

Description

Create an icon for use within a page. Icons can appear on their own, inside of a button, or as an icon for a tabPanel within a navbarPage.

Usage

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

Arguments

name

Name of icon. Icons are drawn from the Font Awesome and Glyphicons" libraries. Note that the "fa-" and "glyphicon-" prefixes should not be used in icon names (i.e. the "fa-calendar" icon should be referred to as "calendar")

class

Additional classes to customize the style of the icon (see the usage examples for details on supported styles).

lib

Icon library to use ("font-awesome" or "glyphicon")

Value

An icon element

See Also

For lists of available icons, see http://fontawesome.io/icons/ and http://getbootstrap.com/components/#glyphicons.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
icon("calendar")               # standard icon
icon("calendar", "fa-3x")      # 3x normal size
icon("cog", lib = "glyphicon") # From glyphicon library

# add an icon to a submit button
submitButton("Update View", icon = icon("refresh"))

navbarPage("App Title",
  tabPanel("Plot", icon = icon("bar-chart-o")),
  tabPanel("Summary", icon = icon("list-alt")),
  tabPanel("Table", icon = icon("table"))
)

Example output

<i class="fa fa-calendar"></i>
<i class="fa fa-calendar fa-3x"></i>
<i class="glyphicon glyphicon-cog"></i>
<div>
  <button type="submit" class="btn btn-primary">
    <i class="fa fa-refresh"></i>
    Update View
  </button>
</div>
<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">
      <li class="active">
        <a href="#tab-3621-1" data-toggle="tab" data-value="Plot">
          <i class=" fa fa-bar-chart-o fa-fw"></i>
          Plot
        </a>
      </li>
      <li>
        <a href="#tab-3621-2" data-toggle="tab" data-value="Summary">
          <i class=" fa fa-list-alt fa-fw"></i>
          Summary
        </a>
      </li>
      <li>
        <a href="#tab-3621-3" data-toggle="tab" data-value="Table">
          <i class=" fa fa-table fa-fw"></i>
          Table
        </a>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid">
  <div class="tab-content">
    <div class="tab-pane active" data-value="Plot" data-icon-class="fa fa-bar-chart-o" id="tab-3621-1"></div>
    <div class="tab-pane" data-value="Summary" data-icon-class="fa fa-list-alt" id="tab-3621-2"></div>
    <div class="tab-pane" data-value="Table" data-icon-class="fa fa-table" id="tab-3621-3"></div>
  </div>
</div>

shiny documentation built on May 18, 2018, 1:04 a.m.