Jump to content

Get field icon on frontend

Recommended Posts

Is it possible to retrieve the icon of a field set in the admin? Eg. setting a "phone" icon to a "Phone" field in the admin, and then use this icon (name) in the templates?

Share this post

Link to post
Share on other sites

This should do the trick!

$f = $fields->get("body");
echo '<i class="fa '.$f->icon.'"></i>';

PS make sure you load this on the page:

<link rel="stylesheet" href="/wire/templates-admin/styles/font-awesome/css/font-awesome.min.css" type="text/css">
  • Like 7

Share this post

Link to post
Share on other sites

Thanks, it really did! Could have thought about the $fields variable myself :)

This is a great way to add icons using the admin, without any additional stuff.

Share this post

Link to post
Share on other sites

Another way is

  • Like 1

Share this post

Link to post
Share on other sites

Or you can go even shorter with: 

  • Like 1

Share this post

Link to post
Share on other sites

Indeed, thanks!

I usually don't want to go shorter but this is an exception :)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Harmen
      Hi all,
      I am trying to build a form in a module. So when the render() method is called, I build the form and I want to apply a custom markup, which is defined in an array.
      Unfortunately I can't remove some text in my label. Instead of a label I want an icon, but there is always some text next to my icon as you can see below:

      I don't know how, but my icon is placed in the label, and that's not what I want.
      My markup looks like this:
      static protected $markup = array( 'list' => "{out}\n", 'item' => "\n\t<div class='form-group input-group'>\n{out}\n\t</div>", 'item_label' => "<label class=input-group-addon>{out}</label>", 'item_icon' => "<span><i class='fa fa-fw fa-{name}' aria-hidden='true'></i></span>", 'item_content' => "{out}", 'item_error' => "\n<p class='field--error--message'>{out}</p>", 'item_description' => "\n<p class='field__description'>{out}</p>", //.... etc ); and results in this:
      <div class="form-group input-group"> <label class="input-group-addon"> <span> <i class="fa fa-fw fa-envelope" aria-hidden="true"></i> </span> E-Mail </label> <input id="Inputfield_contact_email" name="contact_email" class="form-control InputfieldMaxWidth" type="email" maxlength="512"> </div>  
      and what I want is:
      <div class="form-group input-group "> <span id="contact_form" class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> <input required="" class="form-control" name="name" id="contact_form" type="text" value="" placeholder="Name"> </div> The only problem is that the code above is hard-coded and I don't know how to remove that piece of text next to my icon....
      Thanks in advance,
    • By benbyf
      New module which does what it says in the title. It adds an icon to a page on the page tree if -> a specific field is true and / or is a specified template.
      For example I'm using it to add an icon to any page that has a checked (checkbox) exclusive field. This helps with admin clarity as you can see instantly which pages of the same template have differing content (i.e. are exclusive or not).

    • By gebeer
      I would like to utilize wire/modules/Inputfield/InputfieldIcon/ in a module.
      I found that icons.inc there does not include all FontAwesome 4.4 icon classes.
      Is the selection of icon classes in icons.inc opinionated for use in PW or is it just not up to date?
      Anyways, I put together some code to produce a icons.inc with all available FA icon classes from master branch, sorted alphabetically:
      <?php $url = "https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/src/icons.yml"; $faArray = yaml_parse_url($url); // pack all icon ids (classnames) in array and sort alphabetically $iconClasses = []; foreach ($faArray['icons'] as $key => $row) { $iconClasses[$key] = $row['id']; } array_multisort($iconClasses, SORT_ASC, $faArray['icons']); // write all fa classnames to a file $file = "icons.inc"; $prefix = "fa-"; $out = fopen($file, "w+"); foreach ($iconClasses as $c) { $class = $prefix . $c . PHP_EOL; // echo $class . "<br>"; fwrite($out, $class); } fclose($out);
    • By GeraldSchmidt
      i love the FieldtypeFontIconPicker but unfortunately it only supports FontAwesome.
      Is there a solution to include the icon package of Foundation ?
    • By gebeer
      Hello all,
      I'm working on a travel directory site with locations of the region I live in in Thailand. This is a private fun learning project.
      I would like to assign an icon to each location. ATM I have a simple text input field in my location template where I manually type in the fontawesome class name for the icon I want to assign which is a bit tedious.
      So I am thinking about putting together an Inputfieldtype "Icon" which will surely aid in learning PW module development (and some more PHP along the way)
      My concept so far:
      -since people will hardly use all 500+ icons on their sites, I want to use an asm select in the field setup to search and select the icons that we want to use
      -the asm select should show both, the icon and it's class name for each icon
      -then use the selected icons to populate a select dropdown field as input field where the user can choose an icon.
      Which inputfield module could I have a look at that is using asm select in the field setup?
      I used import.io (which really is a fun tool) to create a data set with all fontawesome4.2.0 icon class names and their unicodes. If you're interested you can see the dataset here (you need to login/signup with them first).
      I can export the dataset as JSON and use that to populate the asm select for the field setup.
      These are my ideas so far. Yours are always welcome
  • Create New...