{"id":211521,"date":"2019-09-27T14:24:53","date_gmt":"2019-09-27T13:24:53","guid":{"rendered":"https:\/\/sopressed.nl\/?p=211521"},"modified":"2019-09-27T14:24:53","modified_gmt":"2019-09-27T13:24:53","slug":"font-awesome-icons-in-divi-gebruiken","status":"publish","type":"post","link":"https:\/\/corporate.dividiva.nl\/?p=211521","title":{"rendered":"Font Awesome icons in Divi gebruiken"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Toevoegen icoontjes van Font Awesome aan je WordPress & Divi website<\/strong><\/p>\n

Ga naar de Divi Module (meestal is dat Tekst maar dit kan ook in b.v. ook in een Divi prijstabel zoals bij ons voorbeeld<\/span>) <\/span><\/p>\n

Ga naar instellingen (2e icoontje, het tandwieltje)<\/strong><\/span><\/p>\n

Klik op de tab text (als je op Visueel staat) dan wordt de complete code van je tekstblokje zichtbaar.<\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Om een pictogram toe te voegen zoek je de pictogramcode op <\/strong>https:\/\/fontawesome.com\/v4.7.0\/icons\/ <\/strong><\/a><\/p>\n\n\n\n

Klik op het gewenste icoontje
kopieer de code <i class=”fa fa-bed” aria-hidden=”true”><\/i><\/strong><\/p>\n\n\n\n

en plak deze voor de tekst
tekst = Dit is een test
dan word het:<\/p>\n\n\n\n

<i class=”fa fa-bed” aria-hidden=”true”><\/i><\/strong>Dit is een test  <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Wil je je eigen huiskleur toevoegen? Leuk!
Om de kleur te wijzigen verander\u00a0 je<\/span><\/p>\n

\u00a0<i class=”fa fa-bed” aria-hidden=”true”><\/i><\/strong>Dit is een test<\/span><\/p>\n\n\n\n

Naar<\/p>\n\n\n\n

<i class=”fa fa-bed” style=”font-size: 24px; color: #2c4037<\/strong>;”><\/i><\/p>\n\n\n\n

aria-hidden=”true”><\/i> <\/p>\n\n\n\n

vervang je door<\/p>\n\n\n\n

style=”font-size: 24px; color: #cc2131 ;”><\/i><\/p>\n\n\n\n

Zo maak je het icoontje rood (de kleurcode vervang je naar eigen wens)
Heb je geen idee wat HEX kleurcodes zijn? 
Ga dan naar https:\/\/www.color-hex.com\/<\/a><\/p>\n\n\n\n

Je Font Awesome icoontje neemt vanzelf de kleur van je font aan zoals je hebt ingesteld voor je website.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

<i class=”fa fa-bed” style=”font-size: 24px; color: #cc2131;”><\/i>Dit is een test<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Gelukt? Nu weet je hoe je een Font Awesome icoontje kunt toevoegen aan je Divi website. Vind je dit niets om zelf te doen? Besteed het uit. Wij vinden het wel leuk. Wel handig als je alvast de namen van je icoontjes gaat opzoeken. Dat lukt wel toch? <\/p>\n","protected":false},"excerpt":{"rendered":"

Om een pictogram toe te voegen zoek je de pictogramcode op https:\/\/fontawesome.com\/v4.7.0\/icons\/ Klik op het gewenste icoontjekopieer de code <i class=”fa fa-bed” aria-hidden=”true”><\/i> en plak deze voor de tekst tekst = Dit is een testdan word het: <i class=”fa fa-bed” aria-hidden=”true”><\/i>Dit is een test  Naar <i class=”fa fa-bed” style=”font-size: 24px; color: #2c4037;”><\/i> aria-hidden=”true”><\/i>  vervang je door […]<\/p>\n","protected":false},"author":1,"featured_media":209710,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"\n

\"\"<\/figure>\n\n\n\n

Toevoegen icoontjes van Font Awesome aan je Wordpress & Divi website<\/strong><\/p>\n

Ga naar de Divi Module (meestal is dat Tekst maar dit kan ook in b.v. ook in een Divi prijstabel zoals bij ons voorbeeld<\/span>)\u00a0<\/span><\/p>\n

Ga naar instellingen (2e icoontje, het tandwieltje)<\/strong><\/span><\/p>\n

Klik op de tab text (als je op Visueel staat) dan wordt de complete code van je tekstblokje zichtbaar.<\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Om een pictogram toe te voegen zoek je de pictogramcode op\u00a0<\/strong>https:\/\/fontawesome.com\/v4.7.0\/icons\/ <\/strong><\/a><\/p>\n\n\n\n

Klik op het gewenste icoontje
kopieer de code <i class=\"fa fa-bed\" aria-hidden=\"true\"><\/i><\/strong><\/p>\n\n\n\n

en plak deze voor de tekst
tekst = Dit is een test
dan word het:<\/p>\n\n\n\n

<i class=\"fa fa-bed\" aria-hidden=\"true\"><\/i><\/strong>Dit is een test\u00a0 <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Wil je je eigen huiskleur toevoegen? Leuk!
Om de kleur te wijzigen verander\u00a0 je<\/span><\/p>\n

\u00a0<i class=\"fa fa-bed\" aria-hidden=\"true\"><\/i><\/strong>Dit is een test<\/span><\/p>\n\n\n\n

Naar<\/p>\n\n\n\n

<i class=\"fa fa-bed\" style=\"font-size: 24px; color: #2c4037<\/strong>;\"><\/i><\/p>\n\n\n\n

aria-hidden=\"true\"><\/i> <\/p>\n\n\n\n

vervang je door<\/p>\n\n\n\n

style=\"font-size: 24px; color: #cc2131 ;\"><\/i><\/p>\n\n\n\n

Zo maak je het icoontje rood (de kleurcode vervang je naar eigen wens)
Heb je geen idee wat HEX kleurcodes zijn? 
Ga dan naar https:\/\/www.color-hex.com\/<\/a><\/p>\n\n\n\n

Je Font Awesome icoontje neemt vanzelf de kleur van je font aan zoals je hebt ingesteld voor je website.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

<i class=\"fa fa-bed\" style=\"font-size: 24px; color: #cc2131;\"><\/i>Dit is een test<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Gelukt? Nu weet je hoe je een Font Awesome icoontje kunt toevoegen aan je Divi website. Vind je dit niets om zelf te doen? Besteed het uit. Wij vinden het wel leuk. Wel handig als je alvast de namen van je icoontjes gaat opzoeken. Dat lukt wel toch? <\/p>\n","_et_gb_content_width":"","footnotes":""},"categories":[56,49,46],"tags":[],"class_list":["post-211521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi","category-handleidingen","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/posts\/211521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=211521"}],"version-history":[{"count":0,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/posts\/211521\/revisions"}],"wp:attachment":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=211521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=211521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=211521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}