Add icon font to Visual Composer Icon Picker
-
I contacted the theme developer and he let me to this:
https://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.