font_awesome_phoenix v0.3.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, 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> FontAwesomePhoenix.HTML.fa_icon("globe")
{:safe, ["<i class=\"fa fa-globe\">", "", "</i>"]}

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

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

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

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

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

iex> 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>"]}