Permet de créer un champ ACF de type 'icon-picker'.
Attention, dans icomoon, bien penser à exporter la version classe et ne pas baser la font sur le tag i (conflit avec le BO)
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$icomoon-font-family}' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
Utilisation des icônes icomoon à mettre en place directement dans le dossier du thème /assets/fonts (tout extraire à la raicne de ce dossier).
Champ ACF compatible avec : [x] ACF 5
Ajouté directement en tant que fonction pour la compatibilité avec les champs ACF wordplate
- Mettre à jour le composer.json
"repositories": {
...
"adeliom-icon-picker": {
"type": "vcs",
"url": "https://github.com/agence-adeliom/acf-icon-picker.git"
},
...
}
...
"require": {
...
"agence-adeliom/acf-icon-picker": "dev-master"
}
- Laner un
composer update
- Activer le plugin depuis l'administration de Wordpress
- Créer un champ à l'endroit ou vous le souhaitez comme n'importe quel autre champ
use Adeliom\Acf\Fields\IconPicker;
...
IconPicker::make("Icône", "icon")->required()->icons(['name-of-your-icon', '....']);
acf_icon_picker([
'name' => 'icon-picker',
'label' => __('Icone', ''),
'required' => true,
...
])
Pour modifier les différents chemin ou URLs dans le cas où ils devaient se trouver ailleurs que dans le dossier VotreTheme/assets/fonts/, voici quelques filtres :
// modify the path to the icons directory
add_filter( 'acf_icon_path_suffix', 'acf_icon_path_suffix' );
function acf_icon_path_suffix( $path_suffix ) {
return 'assets/img/icons/';
}
// modify the path to the above prefix
add_filter( 'acf_icon_path', 'acf_icon_path' );
function acf_icon_path( $path_suffix ) {
return plugin_dir_path( __FILE__ );
}
// modify the URL to the icons directory to display on the page
add_filter( 'acf_icon_url', 'acf_icon_url' );
function acf_icon_url( $path_suffix ) {
return plugin_dir_url( __FILE__ );
}
// allowed to choose between Image or Font
add_filter( 'acf_icon_image', 'acf_icon_image' );
function acf_icon_image() {
return true;
}
// modify the format (default : svg)
add_filter( 'acf_icon_image_format', 'acf_icon_image_format' );
function acf_icon_image_format() {
return "png";
}
// modify the filename (fantasticon)
add_filter( 'acf_icon_filename', 'acf_icon_filename' );
function acf_icon_filename() {
return "icons.scss";
}