font_awesome_phoenix v1.0.0 FontAwesomePhoenix.HTML

HTML helper functions for creating Font Awesome tags in Phoenix Framework templates.

Summary

Functions

Creates a Font Awesome icon tag. The given names should be the icon name along with any icon modifiers such as 4x, fw or li in a space-delimited string or a list of strings

Functions

fa_icon(names)
fa_icon(names, opts)

Specs

fa_icon(String.t | [String.t], Keyword.t | none) :: {:safe, [String.t]}
fa_icon(names, opts, list)

Creates a Font Awesome icon tag. The given names should be the icon name along with any icon modifiers such as 4x, fw or li in a space-delimited string or a list of strings.

Options:

  • :align_tag - Where to align the tag next to any given text, default is :left
  • :class - Additional classes to add to the icon
  • :data - Keyword list of data tag items to add to the tag
  • :text - Additional text to add next to the icon

Examples:

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon("globe")
{:safe, [?<, "i", " class=\"fa fa-globe\"", ?>, "", ?<, ?/, "i", ?>]}

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon(["globe", "4x", "li"])
{:safe,
  [?<, "i", " class=\"fa fa-globe fa-4x fa-li\"", ?>, "", ?<, ?/, "i",
    ?>]}

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon("home", text: "Back to Home!")
{:safe,
  [?<, "i", " class=\"fa fa-home\"", ?>, "", ?<, ?/, "i", ?>,
    " Back to Home!"]}

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon("user-plus", text: "New User", align_tag: :right)
{:safe,
  ["New User ", ?<, "i", " class=\"fa fa-user-plus\"", ?>, "", ?<, ?/,
    "i", ?>]}

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon("location-arrow", data: [gps_enabled: true])
{:safe,
  [?<, "i",
    " class=\"fa fa-location-arrow\" data-gps-enabled=\"true\"", ?>,
    "", ?<, ?/, "i", ?>]}

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon("camera-retro 4x", class: "myclass")
{:safe,
  [?<, "i", " class=\"fa fa-camera-retro fa-4x myclass\"", ?>, "", ?<,
    ?/, "i", ?>]}

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon("at") do
...>   EEx.eval_string("<%= \"stuff\" %>")
...> end
{:safe,
  [?<, "i", " class=\"fa fa-at\"", ?>, "stuff", ?<, ?/, "i", ?>]}

iex> Elixir.FontAwesomePhoenix.HTML.fa_icon("at", class: "x", data: [mood: :happy]) do
...>   Phoenix.HTML.Tag.content_tag(:em, "@")
...> end
{:safe,
  [?<, "i", " class=\"fa fa-at x\" data-mood=\"happy\"", ?>,
    [?<, "em", "", ?>, "@", ?<, ?/, "em", ?>], ?<, ?/, "i", ?>]}