font_awesome_phoenix v0.3.2 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
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") do
...> EEx.eval_string("<%= \"stuff\" %>")
...> end
{:safe, ["<i class=\"fa fa-at\">", "stuff", "</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>"]}