Support » Plugins » Add icon font to Visual Composer Icon Picker

  • I contacted the theme developer and he let me to this:
    http://wpexplorer-themes.com/total/snippets/add-custom-font-family-icon-box/

    From that, I added this to my child theme functions.php:

    function my_assets() {
    	wp_enqueue_style( 'flaticon', get_stylesheet_directory_uri().'/css/flaticon.css' );
    }
    
    add_action( 'wp_enqueue_scripts', 'my_assets' );
    
    function myprefix_add_new_icon_set_to_iconbox( ) {
    	$param = WPBMap::getParam( 'vcex_icon_box', 'icon_type' );
    	$param['value'][__( 'flaticon', 'total' )] = 'flaticon';
    	vc_update_shortcode_param( 'vcex_icon_box', $param );
    }
    add_filter( 'init', 'myprefix_add_new_icon_set_to_iconbox', 40 );
    
    function myprefix_add_font_picker() {
    	vc_add_param( 'vcex_icon_box', array(
    			'type' => 'iconpicker',
    			'heading' => esc_html__( 'Icon', 'total' ),
    			'param_name' => 'icon_flaticon',
    			'settings' => array(
    				'emptyIcon' => true,
    				'type' => 'flaticon',
    				'iconsPerPage' => 200,
    			),
    			'dependency' => array(
    				'element' => 'icon_type',
    				'value' => 'flaticon',
    			),
    			'group' => esc_html__( 'Icon', 'total' ),
    		)
    	);
    }
    add_filter( 'vc_after_init', 'myprefix_add_font_picker', 40 );
    function myprefix_icon_array() {
    return array(
    	'flaticon apple-laptop-computer' => 'Apple Laptop',
    	'flaticon battery' => 'Battery',
    	'flaticon battery-1' => 'Battery 1',
    	'flaticon broken-laptop' => 'Broken Laptop',
    	'flaticon broken-screen' => 'Broken Screen',
    	'flaticon broken-sreen' => 'Broken Sreen',
    	'flaticon cd' => 'CD',
    	'flaticon compact-discs' => 'Compact Discs',
    	'flaticon computer' => 'Computer',
    	'flaticon computer-1' => 'Computer 1',
    	'flaticon computer-2' => 'Computer 2',
    	'flaticon computer-3' => 'Computer 3',
    	'flaticon computer-4' => 'Computer 4',
    	'flaticon computer-mouse' => 'Computer Mouse',
    	'flaticon computers' => 'Computers',
    	'flaticon connection' => 'Connection',
    	'flaticon export-folder' => 'Export Folder',
    	'flaticon fan' => 'Fan',
    	'flaticon fan-1' => 'Fan 1',
    	'flaticon fans' => 'Fans',
    	'flaticon flash-drive' => 'Flash Drive',
    	'flaticon floppy-disk' => 'Floppy Disk',
    	'flaticon floppy-diskette' => 'Floppy Diskette',
    	'flaticon hard-drive' => 'Hard Drive',
    	'flaticon headphones' => 'Headphones',
    	'flaticon imac' => 'IMAC',
    	'flaticon keyboard' => 'Keyboard',
    	'flaticon keyboard-1' => 'Keyboard 1',
    	'flaticon laptop' => 'Laptop',
    	'flaticon laptop-1' => 'Laptop 1',
    	'flaticon laptop-10' => 'Laptop 10',
    	'flaticon laptop-11' => 'Laptop 11',
    	'flaticon laptop-12' => 'Laptop 12',
    	'flaticon laptop-13' => 'Laptop 13',
    	'flaticon laptop-14' => 'Laptop 14',
    	'flaticon laptop-15' => 'Laptop 15',
    	'flaticon laptop-16' => 'Laptop 16',
    	'flaticon laptop-17' => 'Laptop 17',
    	'flaticon laptop-18' => 'Laptop 18',
    	'flaticon laptop-19' => 'Laptop 19',
    	'flaticon laptop-2' => 'Laptop 2',
    	'flaticon laptop-20' => 'Laptop 20',
    	'flaticon laptop-21' => 'Laptop 21',
    	'flaticon laptop-22' => 'Laptop 22',
    	'flaticon laptop-23' => 'Laptop 23',
    	'flaticon laptop-24' => 'Laptop 24',
    	'flaticon laptop-25' => 'Laptop 25',
    	'flaticon laptop-26' => 'Laptop 26',
    	'flaticon laptop-27' => 'Laptop 27',
    	'flaticon laptop-28' => 'Laptop 28',
    	'flaticon laptop-29' => 'Laptop 29',
    	'flaticon laptop-3' => 'Laptop 3',
    	'flaticon laptop-30' => 'Laptop 30',
    	'flaticon laptop-31' => 'Laptop 31',
    	'flaticon laptop-32' => 'Laptop 32',
    	'flaticon laptop-33' => 'Laptop 33',
    	'flaticon laptop-34' => 'Laptop 34',
    	'flaticon laptop-35' => 'Laptop 35',
    	'flaticon laptop-36' => 'Laptop 36',
    	'flaticon laptop-37' => 'Laptop 37',
    	'flaticon laptop-38' => 'Laptop 38',
    	'flaticon laptop-39' => 'Laptop 39',
    	'flaticon laptop-4' => 'Laptop 4',
    	'flaticon laptop-40' => 'Laptop 40',
    	'flaticon laptop-41' => 'Laptop 41',
    	'flaticon laptop-42' => 'Laptop 42',
    	'flaticon laptop-43' => 'Laptop 43',
    	'flaticon laptop-44' => 'Laptop 44',
    	'flaticon laptop-45' => 'Laptop 45',
    	'flaticon laptop-46' => 'Laptop 46',
    	'flaticon laptop-47' => 'Laptop 47',
    	'flaticon laptop-48' => 'Laptop 48',
    	'flaticon laptop-49' => 'Laptop 49',
    	'flaticon laptop-5' => 'Laptop 5',
    	'flaticon laptop-6' => 'Laptop 6',
    	'flaticon laptop-7' => 'Laptop 7',
    	'flaticon laptop-8' => 'Laptop 8',
    	'flaticon laptop-9' => 'Laptop 9',
    	'flaticon laptop-computer' => 'Laptop Computer',
    	'flaticon laptops' => 'Laptops',
    	'flaticon linked' => 'Linked',
    	'flaticon micro-sd-card' => 'SD Card',
    	'flaticon microchip' => 'Microchip',
    	'flaticon monitor' => 'Monitor',
    	'flaticon monitor-1' => 'Monitor 1',
    	'flaticon monitor-2' => 'Monitor 2',
    	'flaticon network' => 'Network',
    	'flaticon network-administration' => 'Network Administrator',
    	'flaticon networking' => 'Networking',
    	'flaticon pendrive' => 'Pendrive',
    	'flaticon printer' => 'Printer',
    	'flaticon printer-1' => 'Printer 1',
    	'flaticon router' => 'Router',
    	'flaticon router-1' => 'Router 1',
    	'flaticon router-2' => 'Router 2',
    	'flaticon router-3' => 'Router 3',
    	'flaticon router-4' => 'Router 4',
    	'flaticon screen' => 'Screen',
    	'flaticon screen-1' => 'Screen 1',
    	'flaticon screen-10' => 'Screen 10',
    	'flaticon screen-11' => 'Screen 11',
    	'flaticon screen-12' => 'Screen 12',
    	'flaticon screen-13' => 'Screen 13',
    	'flaticon screen-14' => 'Screen 14',
    	'flaticon screen-15' => 'Screen 15',
    	'flaticon screen-16' => 'Screen 16',
    	'flaticon screen-17' => 'Screen 17',
    	'flaticon screen-18' => 'Screen 18',
    	'flaticon screen-19' => 'Screen 19',
    	'flaticon screen-2' => 'Screen 2',
    	'flaticon screen-20' => 'Screen 20',
    	'flaticon screen-21' => 'Screen 21',
    	'flaticon screen-22' => 'Screen 22',
    	'flaticon screen-23' => 'Screen 23',
    	'flaticon screen-24' => 'Screen 24',
    	'flaticon screen-25' => 'Screen 25',
    	'flaticon screen-26' => 'Screen 26',
    	'flaticon screen-27' => 'Screen 27',
    	'flaticon screen-28' => 'Screen 28',
    	'flaticon screen-29' => 'Screen 29',
    	'flaticon screen-3' => 'Screen 3',
    	'flaticon screen-30' => 'Screen 30',
    	'flaticon screen-31' => 'Screen 31',
    	'flaticon screen-32' => 'Screen 32',
    	'flaticon screen-4' => 'Screen 4',
    	'flaticon screen-5' => 'Screen 5',
    	'flaticon screen-6' => 'Screen 6',
    	'flaticon screen-7' => 'Screen 7',
    	'flaticon screen-8' => 'Screen 8',
    	'flaticon screen-9' => 'Screen 9',
    	'flaticon speaker' => 'Speaker',
    	'flaticon speech' => 'Speech',
    	'flaticon speech-balloon' => 'Ballon',
    	'flaticon speech-balloon-1' => 'Ballon 1',
    	'flaticon speech-balloon-2' => 'Ballon 2',
    	'flaticon speech-balloon-3' => 'Ballon 3',
    	'flaticon storage-drive' => 'Storage Drive',
    	'flaticon television' => 'Television',
    	'flaticon television-1' => 'Television 1',
    	'flaticon television-2' => 'Television 2',
    	'flaticon twitter' => 'Twitter',
    	'flaticon universal-serial-usb-connector' => 'USB Connector',
    	'flaticon usb' => 'USB',
    	'flaticon usb-1' => 'USB 1',
    	'flaticon usb-2' => 'USB 2',
    	'flaticon usb-3' => 'USB 3',
    	'flaticon usb-4' => 'USB 4',
    	'flaticon webcam' => 'Webcam',
    	'flaticon webcam-1' => 'Webcam 1',
    	'flaticon world-image-on-computer-screen' => 'World on Computer Screen');
    }
    add_filter( 'vc_iconpicker-type-flaticon', 'myprefix_icon_array' );

    This is the flaticon.css:

    @font-face {
      font-family: "Flaticon";
      src: url("./Flaticon.eot");
      src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
           url("./Flaticon.woff") format("woff"),
           url("./Flaticon.ttf") format("truetype"),
           url("./Flaticon.svg#Flaticon") format("svg");
      font-weight: normal;
      font-style: normal;
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
        font-family: "Flaticon";
        src: url("./Flaticon.svg#Flaticon") format("svg");
      }
    }
    
    [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
    [class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
      font-family: Flaticon;
            font-size: 20px;
    font-style: normal;
    margin-left: 20px;
    }
    
    .flaticon-apple-laptop-computer:before { content: "\f100"; }
    .flaticon-battery:before { content: "\f101"; }
    .flaticon-battery-1:before { content: "\f102"; }
    .flaticon-broken-laptop:before { content: "\f103"; }
    .flaticon-broken-screen:before { content: "\f104"; }
    .flaticon-broken-sreen:before { content: "\f105"; }
    .flaticon-cd:before { content: "\f106"; }
    .flaticon-compact-discs:before { content: "\f107"; }
    .flaticon-computer:before { content: "\f108"; }
    .flaticon-computer-1:before { content: "\f109"; }
    .flaticon-computer-2:before { content: "\f10a"; }
    .flaticon-computer-3:before { content: "\f10b"; }
    .flaticon-computer-4:before { content: "\f10c"; }
    .flaticon-computer-mouse:before { content: "\f10d"; }
    .flaticon-computers:before { content: "\f10e"; }
    .flaticon-connection:before { content: "\f10f"; }
    .flaticon-export-folder:before { content: "\f110"; }
    .flaticon-fan:before { content: "\f111"; }
    .flaticon-fan-1:before { content: "\f112"; }
    .flaticon-fans:before { content: "\f113"; }
    .flaticon-flash-drive:before { content: "\f114"; }
    .flaticon-floppy-disk:before { content: "\f115"; }
    .flaticon-floppy-diskette:before { content: "\f116"; }
    .flaticon-hard-drive:before { content: "\f117"; }
    .flaticon-headphones:before { content: "\f118"; }
    .flaticon-imac:before { content: "\f119"; }
    .flaticon-keyboard:before { content: "\f11a"; }
    .flaticon-keyboard-1:before { content: "\f11b"; }
    .flaticon-laptop:before { content: "\f11c"; }
    .flaticon-laptop-1:before { content: "\f11d"; }
    .flaticon-laptop-10:before { content: "\f11e"; }
    .flaticon-laptop-11:before { content: "\f11f"; }
    .flaticon-laptop-12:before { content: "\f120"; }
    .flaticon-laptop-13:before { content: "\f121"; }
    .flaticon-laptop-14:before { content: "\f122"; }
    .flaticon-laptop-15:before { content: "\f123"; }
    .flaticon-laptop-16:before { content: "\f124"; }
    .flaticon-laptop-17:before { content: "\f125"; }
    .flaticon-laptop-18:before { content: "\f126"; }
    .flaticon-laptop-19:before { content: "\f127"; }
    .flaticon-laptop-2:before { content: "\f128"; }
    .flaticon-laptop-20:before { content: "\f129"; }
    .flaticon-laptop-21:before { content: "\f12a"; }
    .flaticon-laptop-22:before { content: "\f12b"; }
    .flaticon-laptop-23:before { content: "\f12c"; }
    .flaticon-laptop-24:before { content: "\f12d"; }
    .flaticon-laptop-25:before { content: "\f12e"; }
    .flaticon-laptop-26:before { content: "\f12f"; }
    .flaticon-laptop-27:before { content: "\f130"; }
    .flaticon-laptop-28:before { content: "\f131"; }
    .flaticon-laptop-29:before { content: "\f132"; }
    .flaticon-laptop-3:before { content: "\f133"; }
    .flaticon-laptop-30:before { content: "\f134"; }
    .flaticon-laptop-31:before { content: "\f135"; }
    .flaticon-laptop-32:before { content: "\f136"; }
    .flaticon-laptop-33:before { content: "\f137"; }
    .flaticon-laptop-34:before { content: "\f138"; }
    .flaticon-laptop-35:before { content: "\f139"; }
    .flaticon-laptop-36:before { content: "\f13a"; }
    .flaticon-laptop-37:before { content: "\f13b"; }
    .flaticon-laptop-38:before { content: "\f13c"; }
    .flaticon-laptop-39:before { content: "\f13d"; }
    .flaticon-laptop-4:before { content: "\f13e"; }
    .flaticon-laptop-40:before { content: "\f13f"; }
    .flaticon-laptop-41:before { content: "\f140"; }
    .flaticon-laptop-42:before { content: "\f141"; }
    .flaticon-laptop-43:before { content: "\f142"; }
    .flaticon-laptop-44:before { content: "\f143"; }
    .flaticon-laptop-45:before { content: "\f144"; }
    .flaticon-laptop-46:before { content: "\f145"; }
    .flaticon-laptop-47:before { content: "\f146"; }
    .flaticon-laptop-48:before { content: "\f147"; }
    .flaticon-laptop-49:before { content: "\f148"; }
    .flaticon-laptop-5:before { content: "\f149"; }
    .flaticon-laptop-6:before { content: "\f14a"; }
    .flaticon-laptop-7:before { content: "\f14b"; }
    .flaticon-laptop-8:before { content: "\f14c"; }
    .flaticon-laptop-9:before { content: "\f14d"; }
    .flaticon-laptop-computer:before { content: "\f14e"; }
    .flaticon-laptops:before { content: "\f14f"; }
    .flaticon-linked:before { content: "\f150"; }
    .flaticon-micro-sd-card:before { content: "\f151"; }
    .flaticon-microchip:before { content: "\f152"; }
    .flaticon-monitor:before { content: "\f153"; }
    .flaticon-monitor-1:before { content: "\f154"; }
    .flaticon-monitor-2:before { content: "\f155"; }
    .flaticon-network:before { content: "\f156"; }
    .flaticon-network-administration:before { content: "\f157"; }
    .flaticon-networking:before { content: "\f158"; }
    .flaticon-pendrive:before { content: "\f159"; }
    .flaticon-printer:before { content: "\f15a"; }
    .flaticon-printer-1:before { content: "\f15b"; }
    .flaticon-router:before { content: "\f15c"; }
    .flaticon-router-1:before { content: "\f15d"; }
    .flaticon-router-2:before { content: "\f15e"; }
    .flaticon-router-3:before { content: "\f15f"; }
    .flaticon-router-4:before { content: "\f160"; }
    .flaticon-screen:before { content: "\f161"; }
    .flaticon-screen-1:before { content: "\f162"; }
    .flaticon-screen-10:before { content: "\f163"; }
    .flaticon-screen-11:before { content: "\f164"; }
    .flaticon-screen-12:before { content: "\f165"; }
    .flaticon-screen-13:before { content: "\f166"; }
    .flaticon-screen-14:before { content: "\f167"; }
    .flaticon-screen-15:before { content: "\f168"; }
    .flaticon-screen-16:before { content: "\f169"; }
    .flaticon-screen-17:before { content: "\f16a"; }
    .flaticon-screen-18:before { content: "\f16b"; }
    .flaticon-screen-19:before { content: "\f16c"; }
    .flaticon-screen-2:before { content: "\f16d"; }
    .flaticon-screen-20:before { content: "\f16e"; }
    .flaticon-screen-21:before { content: "\f16f"; }
    .flaticon-screen-22:before { content: "\f170"; }
    .flaticon-screen-23:before { content: "\f171"; }
    .flaticon-screen-24:before { content: "\f172"; }
    .flaticon-screen-25:before { content: "\f173"; }
    .flaticon-screen-26:before { content: "\f174"; }
    .flaticon-screen-27:before { content: "\f175"; }
    .flaticon-screen-28:before { content: "\f176"; }
    .flaticon-screen-29:before { content: "\f177"; }
    .flaticon-screen-3:before { content: "\f178"; }
    .flaticon-screen-30:before { content: "\f179"; }
    .flaticon-screen-31:before { content: "\f17a"; }
    .flaticon-screen-32:before { content: "\f17b"; }
    .flaticon-screen-4:before { content: "\f17c"; }
    .flaticon-screen-5:before { content: "\f17d"; }
    .flaticon-screen-6:before { content: "\f17e"; }
    .flaticon-screen-7:before { content: "\f17f"; }
    .flaticon-screen-8:before { content: "\f180"; }
    .flaticon-screen-9:before { content: "\f181"; }
    .flaticon-speaker:before { content: "\f182"; }
    .flaticon-speech:before { content: "\f183"; }
    .flaticon-speech-balloon:before { content: "\f184"; }
    .flaticon-speech-balloon-1:before { content: "\f185"; }
    .flaticon-speech-balloon-2:before { content: "\f186"; }
    .flaticon-speech-balloon-3:before { content: "\f187"; }
    .flaticon-storage-drive:before { content: "\f188"; }
    .flaticon-television:before { content: "\f189"; }
    .flaticon-television-1:before { content: "\f18a"; }
    .flaticon-television-2:before { content: "\f18b"; }
    .flaticon-twitter:before { content: "\f18c"; }
    .flaticon-universal-serial-usb-connector:before { content: "\f18d"; }
    .flaticon-usb:before { content: "\f18e"; }
    .flaticon-usb-1:before { content: "\f18f"; }
    .flaticon-usb-2:before { content: "\f190"; }
    .flaticon-usb-3:before { content: "\f191"; }
    .flaticon-usb-4:before { content: "\f192"; }
    .flaticon-webcam:before { content: "\f193"; }
    .flaticon-webcam-1:before { content: "\f194"; }
    .flaticon-world-image-on-computer-screen:before { content: "\f195"; }
    

    The icon picker drop down menu isn’t giving me the option to choose from the new icon set and I can’t figure out where I’ve gone wrong.

  • The topic ‘Add icon font to Visual Composer Icon Picker’ is closed to new replies.