Elusive Icons

[smokro]

When using Elusive Icons Select Option, it shows a square on frontpage instead of the selected icon. Everything else is working well, thanks to this awesome framework.

And one more thing: it would be great if I could add Font Awesome to select field, like Elusive Icons. Is it possible? How? Someone asked the same question and got no answer: https://github.com/ReduxFramework/redux-framework/issues/541

I also know about http://docs.reduxframework.com/redux-framework/advanced/adding-another-icon-web-font-to-the-panel/ , I did it and it works for on my Panel, but I'm talking about Select Option, like "Elusive Icons Select Option". Thanks!

[dovy]

It shows a square on the front because you still have to enqueue Elusive on the frontend yourself.

[dovy]

We embed elusive, but we don't auto enqueue for obvious reasons.

[smokro]

Ok. Thanks for your reply. Can you answer to the 2nd question, please?

[kprovance]

Read this: http://docs.reduxframework.com/redux-framework/advanced/add-a-custom-field/

Basically, you'll have to take the existing select field and overload it with your own version that would support whatever icons set you want to use.

[dovy]

Actually... this is how I did it with fontawesome after I had enqueued fontawesome.

$icons = array(
    "fa-adn",
    "fa-android",
    "fa-apple",
    "fa-behance",
    "fa-behance-square",
    "fa-bitbucket",
    "fa-bitbucket-square",
    "fa-bitcoin",
    "fa-btc",
    "fa-codepen",
    "fa-css3",
    "fa-delicious",
    "fa-deviantart",
    "fa-digg",
    "fa-dribbble",
    "fa-dropbox",
    "fa-drupal",
    "fa-empire",
    "fa-facebook",
    "fa-facebook-square",
    "fa-flickr",
    "fa-foursquare",
    "fa-ge",
    "fa-git",
    "fa-git-square",
    "fa-github",
    "fa-github-alt",
    "fa-github-square",
    "fa-gittip",
    "fa-google",
    "fa-google-plus",
    "fa-google-plus-square",
    "fa-hacker-news",
    "fa-html5",
    "fa-instagram",
    "fa-joomla",
    "fa-jsfiddle",
    "fa-linkedin",
    "fa-linkedin-square",
    "fa-linux",
    "fa-maxcdn",
    "fa-openid",
    "fa-pagelines",
    "fa-pied-piper",
    "fa-pied-piper-alt",
    "fa-pied-piper-square",
    "fa-pinterest",
    "fa-pinterest-square",
    "fa-qq",
    "fa-ra",
    "fa-rebel",
    "fa-reddit",
    "fa-reddit-square",
    "fa-renren",
    "fa-share-alt",
    "fa-share-alt-square",
    "fa-skype",
    "fa-slack",
    "fa-soundcloud",
    "fa-spotify",
    "fa-stack-exchange",
    "fa-stack-overflow",
    "fa-steam",
    "fa-steam-square",
    "fa-stumbleupon",
    "fa-stumbleupon-circle",
    "fa-tencent-weibo",
    "fa-trello",
    "fa-tumblr",
    "fa-tumblr-square",
    "fa-twitter",
    "fa-twitter-square",
    "fa-vimeo-square",
    "fa-vine",
    "fa-vk",
    "fa-wechat",
    "fa-weibo",
    "fa-weixin",
    "fa-windows",
    "fa-wordpress",
    "fa-xing",
    "fa-xing-square",
    "fa-yahoo",
    "fa-youtube",
    "fa-youtube-play",
    "fa-youtube-square"
);
sort( $icons );
$iconArray = array();
foreach ( $icons as $icon ) {
    $name                       = ucwords( str_replace( '-', ' ', str_replace( array(
        'fa-',
        '-play',
        '-square',
        '-alt',
        '-circle'
    ), '', $icon ) ) );
    $iconArray[ 'fa ' . $icon ] = $name;
}

// HERE'S THE FIELD THAT I PUT INTO MY PANEL
array(
    'id'       => 'icon',
    'type'     => 'select',
    'select2'  => array( 'containerCssClass' => 'fa' ),
    'title'    => 'Social Icon',
    'subtitle' => 'Select a social icon to append a link to.',
    'class'    => ' font-icons fa',
    'options'  => $icons
),

[smokro]

Thank you, dovy! I've already did this, kinda. But I can't make the icons preview in the select field like elusive ones. Could you help me with that, following your code? Thanks in advance.

[kprovance]

Problem is you're not showing us what you are doing. Even so, something like this falls under premium support, since it's not a bug with our software, AND because you've been given two different ways to accomplish this. If you want us to do it for you, we kinda need to get paid. Supply and demand.

[smokro]

Thanks for reply, @kprovance . I was following @dovy 's example and I was wondering if he can show me hot to make the icons appear in the select fields. I thought it's pretty simple but if is not, I'm sorry, I'll try it on my own.. Thank you anyways.

[dovy]

For Elusive, just change all fs to elusive. Also change your array to the items from Elusive you want.

If you want all the elusive icons, they're already an example in the sample config.

Best of luck.

[smokro]

Thanks for your reply @dovy . I was speaking about FontAwesome icons, the ones you listed them above. I saw how elusive icons are made to show in the select list but I can't reproduce them for font awesome.

[dovy]

I can't hand you all the code. Find the class names for the fonts yourself and change the prefix (el/fa) to match your needs. Any help beyond this I will ask you to PLEASE pay for a premium support instance for the custom help. Thanks.

[smokro]

Ok. Thank you, @dovy .

[22Codes]

I think This Will work For you ,

$icons = array(
    "fa-adn",
    "fa-android",
    "fa-apple",
    "fa-behance",
    "fa-behance-square",
    "fa-bitbucket",
    "fa-bitbucket-square",
    "fa-bitcoin",
    "fa-btc",
    "fa-codepen",
    "fa-css3",
    "fa-delicious",
    "fa-deviantart",
    "fa-digg",
    "fa-dribbble",
    "fa-dropbox",
    "fa-drupal",
    "fa-empire",
    "fa-facebook",
    "fa-facebook-square",
    "fa-flickr",
    "fa-foursquare",
    "fa-ge",
    "fa-git",
    "fa-git-square",
    "fa-github",
    "fa-github-alt",
    "fa-github-square",
    "fa-gittip",
    "fa-google",
    "fa-google-plus",
    "fa-google-plus-square",
    "fa-hacker-news",
    "fa-html5",
    "fa-instagram",
    "fa-joomla",
    "fa-jsfiddle",
    "fa-linkedin",
    "fa-linkedin-square",
    "fa-linux",
    "fa-maxcdn",
    "fa-openid",
    "fa-pagelines",
    "fa-pied-piper",
    "fa-pied-piper-alt",
    "fa-pied-piper-square",
    "fa-pinterest",
    "fa-pinterest-square",
    "fa-qq",
    "fa-ra",
    "fa-rebel",
    "fa-reddit",
    "fa-reddit-square",
    "fa-renren",
    "fa-share-alt",
    "fa-share-alt-square",
    "fa-skype",
    "fa-slack",
    "fa-soundcloud",
    "fa-spotify",
    "fa-stack-exchange",
    "fa-stack-overflow",
    "fa-steam",
    "fa-steam-square",
    "fa-stumbleupon",
    "fa-stumbleupon-circle",
    "fa-tencent-weibo",
    "fa-trello",
    "fa-tumblr",
    "fa-tumblr-square",
    "fa-twitter",
    "fa-twitter-square",
    "fa-vimeo-square",
    "fa-vine",
    "fa-vk",
    "fa-wechat",
    "fa-weibo",
    "fa-weixin",
    "fa-windows",
    "fa-wordpress",
    "fa-xing",
    "fa-xing-square",
    "fa-yahoo",
    "fa-youtube",
    "fa-youtube-play",
    "fa-youtube-square"
);
sort( $icons );
$iconArray = array();
foreach ( $icons as $icon ) {
    $name                       = ucwords( str_replace( '-', ' ', str_replace( array(
        'fa-',
        '-play',
        '-square',
        '-alt',
        '-circle'
    ), '', $icon ) ) );
    $iconArray[ 'fa ' . $icon ] = $name;
}

// HERE'S THE FIELD THAT I PUT INTO MY PANEL
array(
    'id'       => 'icon',
    'type'     => 'select',
    'select2'  => array( 'containerCssClass' => 'fa' ),
    'title'    => 'Social Icon',
    'subtitle' => 'Select a social icon to append a link to.',
    'class'    => ' font-icons fa',
    'options'  => $iconArray
),

[Bicarbona]

Font Awesome 4.3

$icons = array(
"fa-adjust",
"fa-adn",
"fa-align-center",
"fa-align-justify",
"fa-align-left",
"fa-align-right",
"fa-ambulance",
"fa-anchor",
"fa-android",
"fa-angellist",
"fa-angle-double-down",
"fa-angle-double-left",
"fa-angle-double-right",
"fa-angle-double-up",
"fa-angle-down",
"fa-angle-left",
"fa-angle-right",
"fa-angle-up",
"fa-apple",
"fa-archive",
"fa-area-chart",
"fa-arrow-circle-down",
"fa-arrow-circle-left",
"fa-arrow-circle-o-down",
"fa-arrow-circle-o-left",
"fa-arrow-circle-o-right",
"fa-arrow-circle-o-up",
"fa-arrow-circle-right",
"fa-arrow-circle-up",
"fa-arrow-down",
"fa-arrow-left",
"fa-arrow-right",
"fa-arrow-up",
"fa-arrows",
"fa-arrows-alt",
"fa-arrows-h",
"fa-arrows-v",
"fa-asterisk",
"fa-at",
"fa-automobile",
"fa-backward",
"fa-ban",
"fa-bank",
"fa-bar-chart",
"fa-bar-chart-o",
"fa-barcode",
"fa-bars",
"fa-bed",
"fa-beer",
"fa-behance",
"fa-behance-square",
"fa-bell",
"fa-bell-o",
"fa-bell-slash",
"fa-bell-slash-o",
"fa-bicycle",
"fa-binoculars",
"fa-birthday-cake",
"fa-bitbucket",
"fa-bitbucket-square",
"fa-bitcoin",
"fa-bold",
"fa-bolt",
"fa-bomb",
"fa-book",
"fa-bookmark",
"fa-bookmark-o",
"fa-briefcase",
"fa-btc",
"fa-bug",
"fa-building",
"fa-building-o",
"fa-bullhorn",
"fa-bullseye",
"fa-bus",
"fa-buysellads",
"fa-cab",
"fa-calculator",
"fa-calendar",
"fa-calendar-o",
"fa-camera",
"fa-camera-retro",
"fa-car",
"fa-caret-down",
"fa-caret-left",
"fa-caret-right",
"fa-caret-square-o-down",
"fa-caret-square-o-left",
"fa-caret-square-o-right",
"fa-caret-square-o-up",
"fa-caret-up",
"fa-cart-arrow-down",
"fa-cart-plus",
"fa-cc",
"fa-cc-amex",
"fa-cc-discover",
"fa-cc-mastercard",
"fa-cc-paypal",
"fa-cc-stripe",
"fa-cc-visa",
"fa-certificate",
"fa-chain",
"fa-chain-broken",
"fa-check",
"fa-check-circle",
"fa-check-circle-o",
"fa-check-square",
"fa-check-square-o",
"fa-chevron-circle-down",
"fa-chevron-circle-left",
"fa-chevron-circle-right",
"fa-chevron-circle-up",
"fa-chevron-down",
"fa-chevron-left",
"fa-chevron-right",
"fa-chevron-up",
"fa-child",
"fa-circle",
"fa-circle-o",
"fa-circle-o-notch",
"fa-circle-thin",
"fa-clipboard",
"fa-clock-o",
"fa-close",
"fa-cloud",
"fa-cloud-download",
"fa-cloud-upload",
"fa-cny",
"fa-code",
"fa-code-fork",
"fa-codepen",
"fa-coffee",
"fa-cog",
"fa-cogs",
"fa-columns",
"fa-comment",
"fa-comment-o",
"fa-comments",
"fa-comments-o",
"fa-compass",
"fa-compress",
"fa-connectdevelop",
"fa-copy",
"fa-copyright",
"fa-credit-card",
"fa-crop",
"fa-crosshairs",
"fa-css3",
"fa-cube",
"fa-cubes",
"fa-cut",
"fa-cutlery",
"fa-dashboard",
"fa-dashcube",
"fa-database",
"fa-dedent",
"fa-delicious",
"fa-desktop",
"fa-deviantart",
"fa-diamond",
"fa-digg",
"fa-dollar",
"fa-dot-circle-o",
"fa-download",
"fa-dribbble",
"fa-dropbox",
"fa-drupal",
"fa-edit",
"fa-eject",
"fa-ellipsis-h",
"fa-ellipsis-v",
"fa-empire",
"fa-envelope",
"fa-envelope-o",
"fa-envelope-square",
"fa-eraser",
"fa-eur",
"fa-euro",
"fa-exchange",
"fa-exclamation",
"fa-exclamation-circle",
"fa-exclamation-triangle",
"fa-expand",
"fa-external-link",
"fa-external-link-square",
"fa-eye",
"fa-eye-slash",
"fa-eyedropper",
"fa-facebook",
"fa-facebook-f",
"fa-facebook-official",
"fa-facebook-square",
"fa-fast-backward",
"fa-fast-forward",
"fa-fax",
"fa-female",
"fa-fighter-jet",
"fa-file",
"fa-file-archive-o",
"fa-file-audio-o",
"fa-file-code-o",
"fa-file-excel-o",
"fa-file-image-o",
"fa-file-movie-o",
"fa-file-o",
"fa-file-pdf-o",
"fa-file-photo-o",
"fa-file-picture-o",
"fa-file-powerpoint-o",
"fa-file-sound-o",
"fa-file-text",
"fa-file-text-o",
"fa-file-video-o",
"fa-file-word-o",
"fa-file-zip-o",
"fa-files-o",
"fa-film",
"fa-filter",
"fa-fire",
"fa-fire-extinguisher",
"fa-flag",
"fa-flag-checkered",
"fa-flag-o",
"fa-flash",
"fa-flask",
"fa-flickr",
"fa-floppy-o",
"fa-folder",
"fa-folder-o",
"fa-folder-open",
"fa-folder-open-o",
"fa-font",
"fa-forumbee",
"fa-forward",
"fa-foursquare",
"fa-frown-o",
"fa-futbol-o",
"fa-gamepad",
"fa-gavel",
"fa-gbp",
"fa-ge",
"fa-gear",
"fa-gears",
"fa-genderless",
"fa-gift",
"fa-git",
"fa-git-square",
"fa-github",
"fa-github-alt",
"fa-github-square",
"fa-gittip",
"fa-glass",
"fa-globe",
"fa-google",
"fa-google-plus",
"fa-google-plus-square",
"fa-google-wallet",
"fa-graduation-cap",
"fa-gratipay",
"fa-group",
"fa-h-square",
"fa-hacker-news",
"fa-hand-o-down",
"fa-hand-o-left",
"fa-hand-o-right",
"fa-hand-o-up",
"fa-hdd-o",
"fa-header",
"fa-headphones",
"fa-heart",
"fa-heart-o",
"fa-heartbeat",
"fa-history",
"fa-home",
"fa-hospital-o",
"fa-hotel",
"fa-html5",
"fa-ils",
"fa-image",
"fa-inbox",
"fa-indent",
"fa-info",
"fa-info-circle",
"fa-inr",
"fa-instagram",
"fa-institution",
"fa-ioxhost",
"fa-italic",
"fa-joomla",
"fa-jpy",
"fa-jsfiddle",
"fa-key",
"fa-keyboard-o",
"fa-krw",
"fa-language",
"fa-laptop",
"fa-lastfm",
"fa-lastfm-square",
"fa-leaf",
"fa-leanpub",
"fa-legal",
"fa-lemon-o",
"fa-level-down",
"fa-level-up",
"fa-life-bouy",
"fa-life-buoy",
"fa-life-ring",
"fa-life-saver",
"fa-lightbulb-o",
"fa-line-chart",
"fa-link",
"fa-linkedin",
"fa-linkedin-square",
"fa-linux",
"fa-list",
"fa-list-alt",
"fa-list-ol",
"fa-list-ul",
"fa-location-arrow",
"fa-lock",
"fa-long-arrow-down",
"fa-long-arrow-left",
"fa-long-arrow-right",
"fa-long-arrow-up",
"fa-magic",
"fa-magnet",
"fa-mail-forward",
"fa-mail-reply",
"fa-mail-reply-all",
"fa-male",
"fa-map-marker",
"fa-mars",
"fa-mars-double",
"fa-mars-stroke",
"fa-mars-stroke-h",
"fa-mars-stroke-v",
"fa-maxcdn",
"fa-meanpath",
"fa-medium",
"fa-medkit",
"fa-meh-o",
"fa-mercury",
"fa-microphone",
"fa-microphone-slash",
"fa-minus",
"fa-minus-circle",
"fa-minus-square",
"fa-minus-square-o",
"fa-mobile",
"fa-mobile-phone",
"fa-money",
"fa-moon-o",
"fa-mortar-board",
"fa-motorcycle",
"fa-music",
"fa-navicon",
"fa-neuter",
"fa-newspaper-o",
"fa-openid",
"fa-outdent",
"fa-pagelines",
"fa-paint-brush",
"fa-paper-plane",
"fa-paper-plane-o",
"fa-paperclip",
"fa-paragraph",
"fa-paste",
"fa-pause",
"fa-paw",
"fa-paypal",
"fa-pencil",
"fa-pencil-square",
"fa-pencil-square-o",
"fa-phone",
"fa-phone-square",
"fa-photo",
"fa-picture-o",
"fa-pie-chart",
"fa-pied-piper",
"fa-pied-piper-alt",
"fa-pinterest",
"fa-pinterest-p",
"fa-pinterest-square",
"fa-plane",
"fa-play",
"fa-play-circle",
"fa-play-circle-o",
"fa-plug",
"fa-plus",
"fa-plus-circle",
"fa-plus-square",
"fa-plus-square-o",
"fa-power-off",
"fa-print",
"fa-puzzle-piece",
"fa-qq",
"fa-qrcode",
"fa-question",
"fa-question-circle",
"fa-quote-left",
"fa-quote-right",
"fa-ra",
"fa-random",
"fa-rebel",
"fa-recycle",
"fa-reddit",
"fa-reddit-square",
"fa-refresh",
"fa-remove",
"fa-renren",
"fa-reorder",
"fa-repeat",
"fa-reply",
"fa-reply-all",
"fa-retweet",
"fa-rmb",
"fa-road",
"fa-rocket",
"fa-rotate-left",
"fa-rotate-right",
"fa-rouble",
"fa-rss",
"fa-rss-square",
"fa-rub",
"fa-ruble",
"fa-rupee",
"fa-save",
"fa-scissors",
"fa-search",
"fa-search-minus",
"fa-search-plus",
"fa-sellsy",
"fa-send",
"fa-send-o",
"fa-server",
"fa-share",
"fa-share-alt",
"fa-share-alt-square",
"fa-share-square",
"fa-share-square-o",
"fa-shekel",
"fa-sheqel",
"fa-shield",
"fa-ship",
"fa-shirtsinbulk",
"fa-shopping-cart",
"fa-sign-in",
"fa-sign-out",
"fa-signal",
"fa-simplybuilt",
"fa-sitemap",
"fa-skyatlas",
"fa-skype",
"fa-slack",
"fa-sliders",
"fa-slideshare",
"fa-smile-o",
"fa-soccer-ball-o",
"fa-sort",
"fa-sort-alpha-asc",
"fa-sort-alpha-desc",
"fa-sort-amount-asc",
"fa-sort-amount-desc",
"fa-sort-asc",
"fa-sort-desc",
"fa-sort-down",
"fa-sort-numeric-asc",
"fa-sort-numeric-desc",
"fa-sort-up",
"fa-soundcloud",
"fa-space-shuttle",
"fa-spinner",
"fa-spoon",
"fa-spotify",
"fa-square",
"fa-square-o",
"fa-stack-exchange",
"fa-stack-overflow",
"fa-star",
"fa-star-half",
"fa-star-half-empty",
"fa-star-half-full",
"fa-star-half-o",
"fa-star-o",
"fa-steam",
"fa-steam-square",
"fa-step-backward",
"fa-step-forward",
"fa-stethoscope",
"fa-stop",
"fa-street-view",
"fa-strikethrough",
"fa-stumbleupon",
"fa-stumbleupon-circle",
"fa-subscript",
"fa-subway",
"fa-suitcase",
"fa-sun-o",
"fa-superscript",
"fa-support",
"fa-table",
"fa-tablet",
"fa-tachometer",
"fa-tag",
"fa-tags",
"fa-tasks",
"fa-taxi",
"fa-tencent-weibo",
"fa-terminal",
"fa-text-height",
"fa-text-width",
"fa-th",
"fa-th-large",
"fa-th-list",
"fa-thumb-tack",
"fa-thumbs-down",
"fa-thumbs-o-down",
"fa-thumbs-o-up",
"fa-thumbs-up",
"fa-ticket",
"fa-times",
"fa-times-circle",
"fa-times-circle-o",
"fa-tint",
"fa-toggle-down",
"fa-toggle-left",
"fa-toggle-off",
"fa-toggle-on",
"fa-toggle-right",
"fa-toggle-up",
"fa-train",
"fa-transgender",
"fa-transgender-alt",
"fa-trash",
"fa-trash-o",
"fa-tree",
"fa-trello",
"fa-trophy",
"fa-truck",
"fa-try",
"fa-tty",
"fa-tumblr",
"fa-tumblr-square",
"fa-turkish-lira",
"fa-twitch",
"fa-twitter",
"fa-twitter-square",
"fa-umbrella",
"fa-underline",
"fa-undo",
"fa-university",
"fa-unlink",
"fa-unlock",
"fa-unlock-alt",
"fa-unsorted",
"fa-upload",
"fa-usd",
"fa-user",
"fa-user-md",
"fa-user-plus",
"fa-user-secret",
"fa-user-times",
"fa-users",
"fa-venus",
"fa-venus-double",
"fa-venus-mars",
"fa-viacoin",
"fa-video-camera",
"fa-vimeo-square",
"fa-vine",
"fa-vk",
"fa-volume-down",
"fa-volume-off",
"fa-volume-up",
"fa-warning",
"fa-wechat",
"fa-weibo",
"fa-weixin",
"fa-whatsapp",
"fa-wheelchair",
"fa-wifi",
"fa-windows",
"fa-won",
"fa-wordpress",
"fa-wrench",
"fa-xing",
"fa-xing-square",
"fa-yahoo",
"fa-yelp",
"fa-yen",
"fa-youtube",
"fa-youtube-play",
"fa-youtube-square");

[dovy]

You could also use this code on the contents of your font-awesome stylesheet to dynamically generate the array:

preg_match_all("/(fa-.*?):before/", $toParse, $output_array);

foreach( $output_array[1] as $icon ) {
    echo $icon;
}

[mxmp210]

Update : For those who are looking alternative for fontawesome 5 Here's the solution : Thanks to @smartcatdev

• Pull Array from this gist https://gist.github.com/smartcatdev/b9592b8a97e07913d6c4265ea08828f3
• Just remove prefixes from previous code

array(
    'id'       => 'top_navigation_button_1_icon',
    type'     => 'select',
    'select2'  => array( 'containerCssClass' => 'FALSE' ),
    'title'    => 'Social Icon',
    'subtitle' => 'Select a social icon to append a link to.',
    'class'    => 'font-icons',
    'options'  => fa_icons()
),