Hi, I wondering if its possible to use FontAwesome inside a dropdown menu at the admin panel. The user should be able to choose between the Icons he want to show behind several headlines.

My idea was to use it like this - but that's not working

Code: Select all

<cms:editable name='my_css' type='message'>
   <style type="text/css">
    @import url("<cms:show k_site_link />css/font-awesome.min.css");   
    #f_icon_choices option{
   font-family: FontAwesome;
   color:#006600;}
   </style>
</cms:editable>

<cms:editable 
  name="icon_choices" 
  label="Icons" 
  desc="Auswahl der Icons"
  opt_values=' <i class="icon-info-sign icon-1x"></i> | <i class="icon-comments-alt icon-1x"></i>'
  type='dropdown'
  group='promo01'
  order='2'  group='promo01'/>

I guess the html tags are not working inside the opt_values. Is there an other way to show the icons?

[cheesypoof]

You were on the right track. Change your selector "#f_icon_choices option" to "#f_icon_choices" and add "font-size:14px;" to the styles. Change your opt_values parameter to opt_values="<cms:embed 'dropdown-icons.html/>". Download the attachment and extract the HTML file to your snippets folder.

You can then use this dropdown value as follows:

Code: Select all

<i class="icon-<cms:show icon_choices/>"></i>

Is it alright if I move this thread to the Tips and Tricks section of the forum?

Attachment moved to post viewtopic.php?p=11162#p11162.

Thank you very much for your help!!! It's working perfect ! Of course, shift it to the Tips and Tricks section.

[cheesypoof]

See the following attachment for a method compatible with v2.0 to select icons from standalone and repeatable drop-downs.

icon-dropdown.zip

(512.86 KiB) Downloaded 1162 times

icon-dropdown.png (42.48 KiB) Viewed 8907 times

Is there an easy way to get this to work within a repeatable?
It's working partly for me. The icons show up on the dropdown button if it's closed, but not within the dropdown if it's open. They also don't show up on the template.

(FA in general does work though, as I was and still am using it in sections not managed by Couch.)

EDIT

Sorry, my fault, the dropdown just doesn't work in Safari, it does work in Firefox.
And the icons not showing up on the template was a syntax error.

[cheesypoof]

I have been meaning to update this tutorial because as you correctly pointed out, browser compatibility is not good at all. I think the solution is to use JavaScript to create a replacement dropdown that can be styled reliably in the DOM. On one of my projects I used http://harvesthq.github.io/chosen/ to do exactly this.

I have not yet studied the repeatable JavaScript so I wouldn't know if there are custom events or callback functions we can use to make this work fully. Please give me a few days and I'll try get you something to work with.

I'm already using chosen in that certain project, so this would be perfect. I'd hate to force my client to use Firefox (although this wouldn't be a bad choice) - having it work in Webkit would be nice, so there's a choice at least.
Thanks cheesyproof, really appreciating your work here!

Hi there, here is an updated Icon list for Font Awesome version 4.2.

Hi! I'm new to the forum!

I'm trying the tutorial posted above and for some reason the dropdown, when expanded looks like the picture attached. When selecting any of the "blank" icons, the correct icon appears. I've included screenshots and the code. Any help would be appreciated! Love the community!

Code: Select all

<cms:editable name='fa_css' type='message'>
      <style type="text/css">
            @import url("<cms:show k_site_link/>css/font-awesome.min.css");
            #f_social_media-0-fa_icon, {font-family: FontAwesome;font-size: 20px;}
      </style>
   </cms:editable>
   <cms:repeatable name='social_media' label='Social Media'>
      <cms:editable name='fa_icon' label='Social Media Icon' opt_values="<cms:embed 'fa-icon-social.html' />" type='dropdown' group='global' />
      <cms:editable name='social_link' label='Social Media Link' type='text' group='global' />
   </cms:repeatable>

[cheesypoof]

Hi and welcome @lisas,

I'm afraid this has always been quite a hacky solution from the outset. These elements just don't style consistently in browsers.

I will send you the solution I came up with some time ago for @krisdoff.