This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Adding Icons to Icon Interface

  • Creator
    Topic
  • #23258
    askwpgirl
    Participant

    Hi Jason,

    In my class, I teach students how to use custom icons in the icon boxes. How I have approached this is to have them type an icon name like gingerbread or cake or cookie or gumball in the Icon field of the icon box. Then, they go through the process of creating an image sprite with these icons in them. We upload the image sprite to the child theme’s images folder, and then call for the each icon in the style.css — of course all the selectors are prefaced with fa- to be compatible with the HTML output of the icon box.

    I wonder if there would be a way to filter in more icons into the themeblvd_get_icons function and what format would be ideal? I don’t know if this is overkill or not. The icons started out as Illustrator vectors, so I could save them as SVGs instead of PNG sprite.

    The way I’m doing it now is a pretty good lesson on image sprites and background-position property. But, adding them to the themeblvd_get_icons would be interesting.

    Thanks. No hurry.

    A

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #23264
    Jason Bobich
    Keymaster

    Hi Angela,

    A nicer way to do this might be just to create your own icon font. There is a free online tool that can create it for you: https://icomoon.io/app/

    This tool will give you font files and then a CSS file. So, in the CSS file it gives you, you can edit it to work with FontAwesome — meaning remove its default icon styling at the top (because FontAwesome will be doing that) and change the classes to be fa-.

    So the CSS in the file should look something like this. Name it whatever you want, maybe my-font.css

    @font-face {
    	font-family: 'my-font';
    	src:url('../font/my-font.eot?wjjqg6');
    	src:url('../font/my-font.eot?#iefixwjjqg6') format('embedded-opentype'),
    		url('../font/my-font.woff?wjjqg6') format('woff'),
    		url('../font/my-font.ttf?wjjqg6') format('truetype'),
    		url('../font/my-font.svg?wjjqg6#my-font') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    .fa-cake,
    .fa-cookie,
    .fa-gingerbread,
    .fa-gumball {
    	font-family: 'My-Font';
    }
    .fa-cake {
    	content: "\f013";
    }
    .fa-cookie {
    	content: "\f014";
    }
    .fa-gingerbread {
    	content: "\f015";
    }
    .fa-gumball {
    	content: "\f016";
    }

    Put all this in your child theme. So maybe now you have a structure:

    /assets/css/font.css
    /assets/font/my-font.eot
    /assets/font/my-font.woff2
    /assets/font/my-font.woff
    /assets/font/my-font.ttf
    /assets/font/my-font.svg

    Then you need to call the CSS file on both the frontend and the Layout Builder page.

    /**
     * Enqueue custom icon font CSS.
     */
    function my_font_css() {
    	wp_enqueue_style( 'my-font', esc_url( get_stylesheet_directory_uri() . '/assets/css/my-font.css' ) );
    }
    add_action('admin_print_styles-toplevel_page_themeblvd_builder', 'my_font_css');
    add_action('wp_enqueue_scripts', 'my_font_css', 25);

    And then, filtering in the actual icons to the icon browser function is pretty straight forward. It would just look like this:

    /**
     * Add custom fa icons to vector icon browser.
     */
    function my_vector_icons( $icons ) {
    
    	// Add custom icons
    	$icons['cake'] = 'cake';
    	$icons['cookie'] = 'cookie';
    	$icons['gingerbread'] = 'gingerbread';
    	$icons['gumball'] = 'gumball';
    
    	// Re-sort all alphabetically (optional)
    	sort( $icons );
    
    	return $icons;
    
    }
    add_filter( 'themeblvd_vector_icons', 'my_vector_icons');
    #23295
    askwpgirl
    Participant

    Sweet!!!!! I am so going to do that. And what you gave me for the themeblvd_vector_icons filter is exactly what I was after, too.

    #23372
    askwpgirl
    Participant

    Okay, a couple adjustments:

    wp_enqueue_style (remove esc_uri)

    add_action (admin_print_styles not admin_print_styles-toplevel_page_themeblvd_builder)

    But works awesome. So fun!

    Final functions:

    /**
     * Enqueue custom icon font CSS.
     */
    function sweet_nothings_css() {
    	wp_enqueue_style( 'sweet-nothings',  get_stylesheet_directory_uri() . '/assets/css/sweet-nothings.css' );
    }
    add_action('admin_print_styles', 'sweet_nothings_css');
    add_action('wp_enqueue_scripts', 'sweet_nothings_css', 25);
    
    /**
     * Add custom fa icons to vector icon browser.
     */
    function my_sweet_icons( $icons ) {
    
    	// Add custom icons
    	$icons['sweetswhip'] = 'whip';
    	$icons['cake'] = 'cake';
    	$icons['gumballs'] = 'gumballs';
    	$icons['cupcake'] = 'cupcake';
    	$icons['candy'] = 'candy';
    	$icons['birthdaycupcake'] = 'birthdaycupcake';
    	$icons['candies'] = 'candies';
    	$icons['gingerbread'] = 'gingerbread';
    	$icons['lollypop'] = 'lollypop';
    	$icons['pie'] = 'pie';
    	$icons['soda'] = 'soda';
    	$icons['sundae'] = 'sundae';
    
    	// Re-sort all alphabetically (optional)
    	sort( $icons );
    
    	return $icons;
    
    }
    add_filter( 'themeblvd_vector_icons', 'my_sweet_icons');

    Love this! Gosh, now I just want to make fonts all day.

    #23373
    askwpgirl
    Participant

    Regarding PNG sprite versus Font:

    PNG sprites work great for something like this:

    http://postimg.org/image/pctnf3van/

    You can technically create a font with multi-color images but it doesn’t work like a normal font and requires multiple html spans for every path in the image — messy.

    Fonts are typically one color, basically one path. The icomoon site doesn’t auto create these. You’d have to do the work in Paths palette in Illustrator first.

    However, http://app.fontastic.me will convert multi-color/path SVG files to single color/path font:

    http://postimg.org/image/ua7807x9r/

    Just thought I’d post this in case anyone else tries to work with multi-color images and gets stumped. I think Sprites are better way to go if wanting to preserve multiple colors. SVG sprites worth looking into as they would be expandable. I haven’t done much with SVG sprites.

    A great tutorial from Sitepoint can be found at:

    http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.