{"id":2025,"date":"2024-12-23T16:58:47","date_gmt":"2024-12-23T16:58:47","guid":{"rendered":"\/tutorials\/?p=2025"},"modified":"2025-12-18T13:25:26","modified_gmt":"2025-12-18T13:25:26","slug":"wordpress-dashicons","status":"publish","type":"post","link":"\/nl\/tutorials\/wordpress-dashicons\/","title":{"rendered":"Hoe kun je WordPress Dashicons gebruiken en weergeven om je thema te laten opvallen"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Een van de eenvoudigste manieren om het uiterlijk van je <strong>WordPress website<\/strong> te veranderen is door het thema te veranderen. Het kan echter veel tijd kosten om het juiste thema te vinden, dus regelmatig veranderen om je site op te frissen is niet de meest effici&euml;nte oplossing.<\/p><p class=\"wp-block-paragraph\">Dit is waar WordPress Dashicons van pas kunnen komen.<\/p><p class=\"wp-block-paragraph\">Dashicons zijn de offici&euml;le WordPress lettertype pictogrammen die beschikbaar zijn vanaf versie 3.8. Ze zijn schaalbaar, lichtgewicht en aanpasbaar met CSS. Daarom kun je Dashicons gebruiken zonder de laadsnelheid van je site aan te tasten.<\/p><p class=\"wp-block-paragraph\">Lees verder en we laten je zien hoe je de set lettertype pictogrammen van Dashicons kunt inschakelen en gebruiken op je WordPress website.<\/p><p>\n\n\n\n\n\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Wat is WordPress Dashicons?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">WordPress Dashicons is een set lettertypepictogrammen die sinds versie 3.8 is opgenomen in WordPress core. Meer dan 300 lettertypepictogrammen in SVG-formaat zijn klaar voor gebruik zonder dat je een pictogrammenbibliotheek van derden hoeft te laden. Bovendien zijn deze lettertypepictogrammen schaalbaar en licht &ndash; perfect om het ontwerp van je website op te fleuren zonder de paginasnelheid te schaden.<\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-dashicons-gebruiken-en-weergeven-in-wordpress\"><strong>Dashicons gebruiken en weergeven in WordPress<\/strong><\/h2><p class=\"wp-block-paragraph\">De Dashicons bibliotheek is standaard beschikbaar in je WordPress admin dashboard. Je moet Dashicons echter handmatig inschakelen als je pictogrammen aan je thema wilt toevoegen.<\/p><p class=\"wp-block-paragraph\">In de volgende secties laten we je zien hoe je de Dashicons bibliotheek in WordPress kunt gebruiken.<\/p><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-dashicons-inschakelen-op-een-wordpress-site\"><strong>Dashicons inschakelen op een WordPress site<\/strong><\/h3><p class=\"wp-block-paragraph\">De eerste stap om Dashicons in WordPress in te schakelen is het bewerken van het bestand <strong>functions.php<\/strong> van je thema.<\/p><ol class=\"wp-block-list\">\n<li>Navigeer naar <strong>Uiterlijk<\/strong> &rarr; <strong>Themabestandseditor<\/strong> in de beheeromgeving van je WordPress.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d0002d1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d0002d1\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1332\" height=\"592\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-211.png\/w=1024,h=1024,fit=scale-down\" alt=\"Waar je in het WordPress dashboard de thema file editor vindt\n\" class=\"wp-image-2032\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-211.png\/w=1332,fit=scale-down 1332w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-211.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-211.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-211.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1332px) 100vw, 1332px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Open het <strong>functions.php<\/strong> bestand.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d004023\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d004023\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"474\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-212.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hoe de functions.php eruit ziet in WordPress\n\" class=\"wp-image-2033\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-212.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-212.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-212.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Voeg het volgende codefragment toe onderaan het bestand <strong>Functies<\/strong>:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );<br><br>function load_dashicons_front_end() {<br><br>wp_enqueue_style( 'dashicons' );<br><br>}<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>Selecteer <strong>Bestand bijwerken<\/strong> als je klaar bent. Je kunt nu Dashicons gebruiken op de voorkant van je WordPress site.<\/li>\n<\/ol><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Tip van een expert                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Zorg ervoor dat je de code toevoegt aan je child theme om te voorkomen dat toekomstige thema-updates de wijzigingen ongedaan maken.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-dashicon-html-en-css-codes-vinden\"><strong>Dashicon HTML en CSS codes vinden<\/strong><\/h3><p class=\"wp-block-paragraph\">Nadat je Dashicons hebt ingeschakeld voor de voorkant van je site, kun je pictogrammen toevoegen aan berichten, pagina&rsquo;s of delen van je thema.<\/p><p class=\"wp-block-paragraph\">Volg de onderstaande stappen om Dashicons toe te voegen aan de menu-items.<\/p><ol class=\"wp-block-list\">\n<li>Ga naar de bibliotheek met Dashicons-pictogrammen in de <strong><a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noopener\">WordPress Developer Resources.<\/a><\/strong> Klik op het gekozen pictogram, klik op de link <strong>HTML kopi&euml;ren<\/strong> en kopieer de Dashicons HTML-code uit het pop-upvenster.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d005dc1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d005dc1\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1244\" height=\"593\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-213.png\/w=1024,h=1024,fit=scale-down\" alt=\"HTLM code vinden in de dashicons icon library\n\" class=\"wp-image-2036\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-213.png\/w=1244,fit=scale-down 1244w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-213.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-213.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-213.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1244px) 100vw, 1244px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Ga naar <strong>Uiterlijk &rarr; Menu&rsquo;s<\/strong> in je WordPress dashboard. Klik op het menu item om het dropdown menu uit te klappen en plak de HTML-code in het <strong>Navigatie Label<\/strong> tekstvak voor de tekst.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d0089e2\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d0089e2\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"489\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-214.png\/w=1024,h=1024,fit=scale-down\" alt=\"Via je WordPress dashboard de HTML-code kopi&euml;ren in het navigatie-label.\n\" class=\"wp-image-2037\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-214.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-214.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-214.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Klik op <strong>Menu opslaan<\/strong>. Volg deze stappen voor andere menu-items die je wilt wijzigen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d00a2e5\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d00a2e5\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"489\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-215.png\/public\" alt=\"Klik op menu opslaan om de stappen correct op te slaan op je website\n\" class=\"wp-image-2038\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-215.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-215.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-215.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Naast de CSS-code levert Dashicons ook de HTML-code en het Glyph-karakter van de lettertype pictogrammen om je website-bouwproces te stroomlijnen. Gebruik de filterfunctie om een specifiek lettertype pictogram te vinden en kopieer de juiste code ergens binnen je WordPress website met behulp van een teksteditor.<\/p><p class=\"wp-block-paragraph\">Kopieer bijvoorbeeld de CSS-code om een pictogram lettertype toe te voegen aan het <strong>style.css <\/strong>bestand. Je kunt een aangepaste CSS-editor gebruiken om je CSS-bestand aan te passen als de Theme File Editor je niet bevalt.<\/p><p class=\"wp-block-paragraph\">Dit zijn een aantal verschillende manieren om Dashicons te gebruiken in WordPress:<\/p><ul class=\"wp-block-list\">\n<li>In post meta, zoals voor posttitels.<\/li>\n\n\n\n<li>In de instellingen van de plug-in.<\/li>\n\n\n\n<li>Als onderdeel van de inhoud van berichten en pagina&rsquo;s.<\/li>\n\n\n\n<li>Binnen of voor een Gutenberg blok.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/nl\/wordpress-hosting\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-160\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-aangepaste-pictogrammen-maken-met-dashicons\"><strong>Aangepaste pictogrammen maken met Dashicons<\/strong><\/h3><p class=\"wp-block-paragraph\">Het Dashicons-project is in 2020 gestopt met het accepteren van aanvragen voor iconen. Daarom is de enige manier om een eigen icoon te maken het aanpassen met CSS-code.<\/p><p class=\"wp-block-paragraph\">Dit is een voorbeeld van een codefragment om het formaat en de kleur van een Dashicons aan te passen. Plaats het in je <strong>style.css <\/strong>bestand en zorg ervoor dat de CSS-selector zich richt op het gekozen element om deze methode te laten werken.<\/p><pre class=\"wp-block-preformatted\">.dashicons {<br><br>font-size: 50px;<br><br>width: 50px;<br><br>height: 50px;<br><br>color: blue;<br><br>}<\/pre><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-dashicons-toevoegen-aan-aangepaste-posttypes-van-wordpress\"><strong>Dashicons toevoegen aan aangepaste posttypes van WordPress<\/strong><\/h3><p class=\"wp-block-paragraph\">Aangepaste posttypes van WordPress verschijnen in het beheermenu. Net als andere menu-items heeft een aangepast berichttype een pictogram ernaast. Het enige probleem is dat WordPress standaard hetzelfde pictogram als <strong>Posts<\/strong> toewijst.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d00eb28\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d00eb28\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"758\" height=\"423\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-216.png\/public\" alt=\"Vanuit het admin menu aangepaste posttypes in WordPress maken\n\" class=\"wp-image-2040\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-216.png\/w=758,fit=scale-down 758w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-216.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Dashicons toevoegen aan je aangepaste posttypes kan dit probleem oplossen en je beheerder dashboard aantrekkelijker maken. Als je aangepaste plug-ins ontwikkelt, kun je verschillende pictogrammen toewijzen om de aandacht van gebruikers vast te houden en de leesbaarheid te verbeteren.<\/p><p class=\"wp-block-paragraph\">Je kunt handmatig een menupictogram opnemen in het menu van je aangepaste posttype of dit doen met behulp van een plug-in. In deze tutorial laten we zien hoe je dat doet met de Custom Post Type UI plug-in:<\/p><ol class=\"wp-block-list\">\n<li><strong>Installeer en activeer de plug-in.<\/strong><\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d0105a3\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d0105a3\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"560\" height=\"308\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-217.png\/public\" alt=\"Plugin voor aanpasbare posttypes te gebruiken op WordPress\n\" class=\"wp-image-2041\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-217.png\/w=560,fit=scale-down 560w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-217.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Open het tabblad <strong>Posttypen bewerken <\/strong>en selecteer het aangepaste posttype dat je wilt wijzigen in het vervolgkeuzemenu. Als je er nog geen hebt gemaakt, doe dat dan via het tabblad <strong>Nieuw berichttype toevoegen<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d011e5b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d011e5b\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"732\" height=\"179\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-218.png\/public\" alt=\"Via post types je berichten aanpassen via de Plugin\n\" class=\"wp-image-2042\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-218.png\/w=732,fit=scale-down 732w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-218.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Scroll naar beneden tot je de <strong>Menu Icon<\/strong> sectie ziet. Klik op <strong>Kies dashicons <\/strong>en kies een icoon dat past bij het aangepaste posttype. Als je al een afbeelding hebt voorbereid, selecteer je<strong> Afbeelding kiezen<\/strong> om deze uit je mediabibliotheek te importeren.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d0138e8\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d0138e8\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"224\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-219.png\/public\" alt=\"Een dashicon selecteren voor je website via de plugin\n\" class=\"wp-image-2043\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-219.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-219.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-219.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Klik op <strong>Post Type opslaan<\/strong> om de wijzigingen op te slaan. Als het proces is geslaagd, zie je een bevestigingsbericht en zou het pictogram moeten verschijnen naast het aangepaste berichttype.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6ab078d01516d\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ab078d01516d\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1571\" height=\"504\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-220.png\/w=1024,h=1024,fit=scale-down\" alt=\"Sla de aanpassing correct op om een bevestigingsbericht te zien.\n\" class=\"wp-image-2044\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-220.png\/w=1571,fit=scale-down 1571w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-220.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-220.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/12\/image-220.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1571px) 100vw, 1571px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading h-t-title-3\" id=\"h-dashicons-verwijderen-in-wordpress\"><strong>Dashicons verwijderen in WordPress<\/strong><\/h3><p class=\"wp-block-paragraph\">De grootte van het Dashicons bestand is slechts ongeveer <strong>30<\/strong> <strong>KB<\/strong>. Hoewel het niet groot is, kan het uitschakelen van het automatisch laden van Dashicons wanneer je het niet gebruikt, de laadsnelheid van je pagina verbeteren.<\/p><p class=\"wp-block-paragraph\">Voeg het volgende codefragment toe onderaan het<strong> functions.php-<\/strong>bestand met behulp van de Theme File Editor. Hiermee schakel je Dashicons uit van de voorkant van je website voor ingelogde gebruikers.<\/p><pre class=\"wp-block-preformatted\">function disable_dashicon() {<br><br>&nbsp;if (current_user_can( 'update_core' )) {<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;<br><br>&nbsp;}<br><br>&nbsp;wp_deregister_style('dashicons');<br><br>}<br><br>add_action( 'wp_enqueue_scripts', 'disable_dashicon' );<\/pre><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-conclusie\"><strong>Conclusie<\/strong><\/h2><p class=\"wp-block-paragraph\">Dashicons is een handige functie die je het gedoe van het toevoegen van onnodige afbeeldingen bespaart. De pictogrammen zijn lichtgewicht, eenvoudig in te sluiten en hebben native WordPress ondersteuning. Hoewel het niet voor front-end gebruik is, kun je het oplossen door het handmatig in te schakelen met codering.<\/p><p class=\"wp-block-paragraph\">Je hebt geleerd hoe je Dashicons kunt weergeven en uitschakelen in WordPress.<\/p><p class=\"wp-block-paragraph\">We hopen dat dit artikel je vragen heeft beantwoord over de populaire iconenbibliotheek van WordPress en hoe je deze op de juiste manier kunt gebruiken.<\/p><p class=\"wp-block-paragraph\">Mocht je nog meer vragen hebben, aarzel dan niet om hieronder een reactie achter te laten.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-wordpress-dashicons-faqs\"><strong>WordPress Dashicons FAQs<\/strong><\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694400c634616\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wat zijn enkele van de beste Dashicons voor WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Enkele van de beste Dashicons voor WordPress zijn de <strong>admin-home, admin-tools, admin-users, admin-post, admin-media, welcome-widgets-menus<\/strong> en <strong>format-image <\/strong>iconen. Deze pictogrammen worden vaak gebruikt voor verschillende functies in het WordPress dashboard en kunnen de gebruikerservaring verbeteren.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694400c63461b\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Heb ik Dashicons nodig in WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Nee, je hebt geen Dashicons nodig in WordPress. Dashicons zijn geweldig voor het verbeteren van het visuele ontwerp en de styling van je WordPress dashboard en hebben geen invloed op de functionaliteit van je site. Het verwijderen van Dashicons kan echter wel invloed hebben op het uiterlijk van sommige plug-ins of thema&rsquo;s die er afhankelijk van zijn.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694400c63461c\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Hoe voeg ik aangepaste Dashicons toe aan WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Om aangepaste Dashicons aan WordPress toe te voegen, gebruik je de<strong> font-face<\/strong> regel in je CSS en voeg je het aangepaste Dashicons lettertypebestand toe. Gebruik vervolgens de inhoudseigenschap om het aangepaste pictogram weer te geven met behulp van een voor of na<strong> pseudo-element.<\/strong><\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694400c63461d\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wat is de grootte van Dashicons in WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>De grootte van Dashicons in WordPress is <strong>standaard 20px bij 20px.<\/strong> Dit kan echter worden aangepast met CSS door de font-size eigenschap te wijzigen of door een aangepast lettertypebestand met andere afmetingen te gebruiken.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div><p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Een van de eenvoudigste manieren om het uiterlijk van je WordPress website te veranderen is door het thema te veranderen. Het kan echter veel tijd kosten om het juiste thema te vinden, dus regelmatig veranderen om je site op te frissen is niet de meest effici&euml;nte oplossing. Dit is waar WordPress Dashicons van pas kunnen [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/nl\/tutorials\/wordpress-dashicons\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":441,"featured_media":2028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Hoe gebruik je en toon je WordPress Dashicons op je website","rank_math_description":"WordPress Dashicons zijn lettertype-pictogrammen die een saai thema kunnen verfraaien. Lees dit artikel om te leren hoe je Dashicons aan je WordPress-site toevoegt.","rank_math_focus_keyword":"wordpress dashicons","footnotes":""},"categories":[117,116],"tags":[],"class_list":["post-2025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geavanceerd","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-dashicons\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/dashicons-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-dashicons\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-dashicons\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-dashicons\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-dashicons\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-dashicons\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-dashicons\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-dashicons\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/dashicons-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/dashicons-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/dashicons-wordpress\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/2025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/users\/441"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/comments?post=2025"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/2025\/revisions"}],"predecessor-version":[{"id":5366,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/2025\/revisions\/5366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/media\/2028"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/media?parent=2025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/categories?post=2025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/tags?post=2025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}