Build a Custom CSS3 & jQuery Icon Font Dropdown Menu
Out of the many online form interfaces I've ever used, a dropdown icon picker has been something that really caught my attention. The purpose is quite generalized and you won't always need something like this for every interface. But lots of social media websites use icons for UI design, profiles, chat messages, and similar page elements.
Live Demo - Download Source Code
This tutorial will guide you through the process of creating a jQuery-powered icon picker input field. The library is called fontIconPicker which is free and open source to use in any number of projects. It's a great choice because all the fonts are completely free and you don't even need to worry about rendering issues. Take a peek at my live sample demo to see the final result.
Getting Started
First create a new HTML document and download a copy of the fontIconPicker plugin right from Github. This includes a simple demo along with all the primary files needed to setup a new icon picker. Also remember to download a local copy of the jQuery library which is a prerequisite to get this plugin working.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Icon Font Dropdown Menu - Template Monster Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.fonticonpicker.min.js"></script> <link rel="stylesheet" type="text/css" media="all" href="css/jquery.fonticonpicker.min.css"> <link rel="stylesheet" type="text/css" media="all" href="css/themes/grey-theme/jquery.fonticonpicker.grey.min.css"> <link rel="stylesheet" type="text/css" media="all" href="fonts/fontello/css/fontello.css"> <link rel="stylesheet" type="text/css" media="all" href="fonts/icomoon/icomoon.css"> </head> <script> </script </body> </html> <body> |
The first required materials are jquery.fonticonpicker.min.js along with a stylesheet named jquery.fonticonpicker.min.css. You could alternatively use the regular non-mini versions but I prefer minified copies since we don't need to directly edit the files. Fontello and IcoMoon are the 2 font libraries included within the demo folder.
Traverse through the Github master directory and you'll find all the crucial files needed for this to work. Take a look at my header code snippet to see if you're missing anything. It's very important to choose a theme from the themes folder or you can just copy all of the themes if that would be easier. I'm using the basic Grey theme because it looks good contrasted with a white background.
<div id="wrapper"> <h1>Icon Picker Field</h1> <div id="pickerui"><input type="text" class="trigger_change" id="iconpicker" name="iconpicker"></div> <span id="iconcontainer"> <h2>Your Icon:</h2> <span class="selected_icon text-danger"><i class="icon-block"></i></span> </span> </div> <!-- @end #wrapper --> The body content itself is pretty simple when there's only a UI picker on the page. My demo includes the actual dropdown icon picker along with an auto-updating container which displays the currently selected icon. This works using <a href="http://css-tricks.com/css-content/" target="_blank" rel="noopener noreferrer">CSS content</a> along with the HTML value of the icon, which is added dynamically through jQuery. The classes like <strong>.selected_icon</strong> will be used later in the jQuery code. <h3>Page Design with CSS</h3> Aside from my own custom styles there is very little to edit that hasn't already been created from the plugin code. You might consider redesigning your own icon picker theme but it's a hefty task. The actual fontIconPicker handles more of the UI while the theme overwrites certain colors to match nicely with the icons. But the only CSS worth editing would be located in my <strong>styles.css</strong> stylesheet. This includes a customized reset built off <a href="http://meyerweb.com/eric/tools/css/reset/" target="_blank" rel="noopener noreferrer">Eric Meyer's template</a>. The page structure itself is very basic using a simple responsive formula: <pre lang="PHP"> /** page structure **/ #wrapper { display: block; background: #fcfcfc; max-width: 650px; min-width: 300px; margin: 0 auto; padding: 15px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2); } #pickerui { display: block; margin-bottom: 80px; text-align: center; } #iconcontainer { display: block; text-align: center; } #iconcontainer .selected_icon { font-size: 9.0em; } #iconcontainer .selected_icon i { color: #333; } |
The page wrapper maxes out at 650px wide and shrinks down to 300px minimum. The central content should also shrink nicely and keep the icon picker still within view(although not optimized for mobile screens it should work in more advanced smartphone browsers).
Everything else is more about display and positioning. I'm trying to keep everything centered on the page including the preview icon display. This icon preview is sized to a 9.0em font size or 90px in the standard grid measurement. If you like this dynamic preview try to mess around with colors and style to see if it can match your own layout.
jQuery Icon Picker Menu
Finally towards the bottom of my HTML file we find the main JavaScript code which implements the function call. fontIconPicker() takes a number of parameters and sets up the initial field input. To handle a more customized icon format I've copied some variables from the fontIconPicker demo file:
1 2 3 4 5 6 7 | $(function(){ // variable icons list var fnt_icons = { 'Web Application Icons' : ["icon-mail", "icon-mail-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all"], 'Form Control Icons' : ["icon-search", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-quote-right", "icon-code", "icon-comment-empty", "icon-chat-empty"], 'Media Icons' : ["icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print"], 'Popular Icons' : ["icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-forward", "icon-quote-left", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat"]}; |
Believe it or not fnt_icons is actually one long jQuery object. Curly Braces like this { } denote a new object variable. Inside the object we have key/value pairs - the key is a string identifying the icon class and the data pair is an array with straight brackets like this [ ]. Each array contains a list of strings which directly relate to identical icon names in each set.
You could add or remove certain icons of your own choosing or even create new categories. This is a more crude yet direct method of adding specific icon choices into the UI. Another alternative would be to use pre-formatted icon classes which cannot offer as much control, but does save on the amount of JS code.
$('#iconpicker').fontIconPicker({ theme: 'fip-grey', source: fnt_icons }).on('change', function() { var nextSpan = $('#iconcontainer'), iconToChange = nextSpan.find('.selected_icon'), selectedIcon = $(this).val(); if(selectedIcon == '') { iconToChange.html('<i class="icon-block"></i>'); iconToChange.removeClass('text-primary').addClass('text-danger'); } else { iconToChange.html('<i class="' + selectedIcon + '"></i>'); iconToChange.addClass('text-primary').removeClass('text-danger'); } }); }); |
The only 2 options I'm passing into the function would be the icon object list and the UI display theme. A chained method .on() runs a function whenever a user changes the value of this input. The font icon picker will return a value saved to the variable selectedIcon which can be used to display the icon in CSS. If there is no value the script resets and displays the circular cancel icon.
All-in-all it's a pretty straightforward script that could utilized with any number of web fonts. All you need to do is include the actual font files along with the related CSS into your document header. Then just list out which icons you want to use with the source option like I did in this example. Check out the related plugin documentation to learn more.
This type of interface can't always be useful on every web project. But I love seeing web developers push the boundaries on what is possible with simple frontend techniques. Since this plugin is also free it adds that much more value to clients and developers alike. This tutorial is also 100% free so you can download and customize my sample code to your valiant heart's content!
First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.
Get more to your email
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.