Comment ajouter des icônes personnalisées dans la barre d'outils w2ui.Ajouter des icônes personnalisées dans la barre d'outils 'w2ui'
Je dois ajouter des icônes de rétablissement et d'annulation dans la barre d'outils w2ui.
Pourriez-vous s'il vous plaît laissez-moi savoir?
Vous pouvez utiliser des polices géniales ou d'autres icônes basées sur les classes CSS dans une barre d'outils w2ui.
Exemple:
$(function() {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'item1', text: 'Undo', icon: 'fa fa-undo' },
{ type: 'button', id: 'item2', text: 'redo', icon: 'fa fa-repeat' }
],
onClick: function (event) {
console.log('Target: '+ event.target, event);
}
});
});
En interne, w2ui va créer une balise <span class="fa fa-undo"> pour l'icône, ainsi - comme je l'ai dit - vous pouvez simplement utiliser toutes les autres icônes à base de CSS.
Un exemple concret: http://w2ui.com/web/demos/#!toolbar/toolbar-9
Note: l'exemple en direct utilise une ancienne version impressionnante police, où la classe fa supplémentaire est manquante.
Change [] et ... Enjoy:
[!DOCTYPE html]
[html][head][title]W2UI Demo: toolbar-1[/title]
[link rel="stylesheet" href="http://w2ui.com/web/css/font-awesome/font-awesome.min.css"]
[link rel="stylesheet" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css"]
[script type="text/javascript" src="http://w2ui.com/web/js/jquery-2.1.1.min.js"][/script]
[script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"][/script]
[style]
.MyIcon1 { content:url('MyLocalIcon.png'); }
.MyIcon2 { content:url('https://www.gstatic.com/inputtools/images/tia.png'); }
[/style]
[/head]
[body]
[div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"][/div]
[script type="text/javascript"]
$(function() {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [ { type: 'button', id: 'btn1', text: 'Undo', icon: 'fa-undo' }, //icon get from: font-awesome
{ type: 'button', id: 'btn2', text: 'Redo', icon: 'fa-repeat' }, //icon get from: font-awesome
{ type: 'button', id: 'btn3', text: 'Local Icon', icon: 'MyIcon1' }, //local file
{ type: 'button', id: 'btn4', text: 'Net Icon', icon: 'MyIcon2' } ] //internet link to file
});
});
[/script]
[/body]
[/html]
Vous pouvez utiliser glyphicon également bootstrap sans problème, par exemple
icon: 'glyphicon glyphicon-menu-left'
Mais bootstrap 4 ne comprend pas les dossiers des polices afin que vous puissiez télécharger bootstrap3 et copier le dossier de polices dans votre projet, le dossier contient
et après rendez-vous ici et ajoutez cette bootstrap4 dans css css à la fin du fichier ..
https://gist.github.com/planetoftheweb/5d75a1ad45eb3059710747a3695fc068
et insérez le chemin de la police à droite de votre dossier copié dans votre projet. Ou vous pouvez utiliser tous les .png au format par exemple de cette manière
<style type="text/css">
.icona:before{
content:url('yourUrl.png');
}
</style>
<script type="text/javascrpt">
//Your w2ui object....
{ type: 'button', id: 'item1', text: 'Undo', icon: 'icona' },
</script
Salut Srini votre question a seulement w2ui badge. Donc, le nombre de personnes qui peuvent voir votre question devient trop faible. S'il vous plaît ajouter d'autres badges comme javascript etc. –
... en outre, il est recommandé de partager plus de dérailleurs. – Blackbam
Bienvenue dans StackOverflow. Pour aider d'autres personnes à vous aider, vous devez fournir un exemple de code de ce que vous avez essayé jusqu'à présent. Veuillez garder à l'esprit que StackOverflow n'est pas un service d'écriture de code. – gus27