Emoji ikoontjes maken icons wordpress website

Vanaf eind jaren 90 zijn Emojis zeer populair. We gebruiken ze constant, en zo’n beetje elk gesprek met Whatsapp of instagram of om emotie over te brengen.

Emoji icons voor webdesign

Ze zijn leuk en eenvoudig te gebruiken. Aangezien emojis overal goed uitziet, zullen we in dit artikel links naar voorbeelden van zowel geanimeerde als niet-geanimeerde emoji of emoticons bespreken met behulp van HTML, CSS en Javascript, die bij de broncodes zijn geleverd. Hoewel de emoji’s je het gevoel kan geven dat het afbeeldingen zijn in de conventionele zin van het woord, zijn ze dat niet. Ze lijken steeds meer op de letters, cijfers, accentueringen en eigenaardige afbeeldingen die we in het algemeen als inhoud zullen beschouwen.

Emoji icons ikoontjes maken en plakken in WordPress website

In het geval dat je het niet kunt, is het kopiëren en plakken van emojis het eenvoudigste wat je kunt doen over HTML, CSS en JavaScript. Er zullen omstandigheden zijn waar je dat niet kunt doen, dus je hebt de fallback aanpak nodig met code. Er is nog een laatste ding dat voor u van cruciaal belang kan zijn. Aangezien emojis lokaal zijn voor de applicatie of het podium waarop u zich bevindt, kan emojis uniek lijken voor verschillende klanten. Er zijn talrijke emoji-bibliotheken die u kunt gebruiken. Gebruik zo welke u houdt van als de lokale emoji bolster niet is wat u zoekt.

[gallery ids=”19975,19976,19977,19978,19974″]

Emoji op Emojipedia

De meest eenvoudige benadering om een emoji te maken is het kopieren van een code. Een handige plek om dat te doen is Emojipedia. Zo kunt u Emojipedia gebruiken om te scannen of door te kijken naar welke emoji u ook zoekt. Wanneer u uw emoji hebt gevonden, is er waar u zonder veel van een rek de emoji kunt zien en dupliceren.

---

Voorbeelden van Emoji op Emojipedia

🌈 💗 🤸 🥑 🙋 🕵 🧞 🏌 🏄 👪 🍁 🍊 🍉 🌔 🔋 📅 ⭐ 🧥 🇵 🚀 🗣 📣 📐 📏 💵 🎸 🎦 🙏 🎢 🏁

---

emojipedia.org

---

<br>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/personal-computer_1f4bb.png" srcset="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/personal-computer_1f4bb.png 2x" alt="Laptop on Apple iOS 13.3" width="120" height="120"><br>

---

<br>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/mobile-phone_1f4f1.png" srcset="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/mobile-phone_1f4f1.png 2x" alt="Mobile Phone on Apple iOS 13.3" width="120" height="120"><br>

---

<br>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/facebook/230/desktop-computer_1f5a5.png" srcset="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/320/facebook/230/desktop-computer_1f5a5.png 2x" alt="Desktop Computer on Facebook 4.0" width="160" height="160"><br>

---

<br>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/facebook/230/desktop-computer_1f5a5.png" srcset="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/320/facebook/230/desktop-computer_1f5a5.png 2x" alt="Desktop Computer on Facebook 4.0" width="80" height="80"><br>

---

Tips en CSS emoji’s voor webdesign

Gebruik de emoji’s niet groter dan 140 pixels. Groter worden zo onscherp. Zie voorbeeld hieronder:

<br>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/facebook/230/desktop-computer_1f5a5.png" srcset="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/320/facebook/230/desktop-computer_1f5a5.png 2x" alt="Desktop Computer on Facebook 4.0" width="320" height="320"><br>

---

💩
💩
💩
💩

<br>
<span class="emoji-16">&#x1f4a9;</span><br>
<span class="emoji-24">&#x1f4a9;</span><br>
<span class="emoji-48">&#x1f4a9;</span><br>
<span class="emoji-96">&#x1f4a9;</span>

span.emoji-16 { font-size: 16px; }
span.emoji-24 { font-size: 24px; }
span.emoji-48 { font-size: 48px; }
span.emoji-96 { font-size: 96px; }

💩
💩
💩
💩
💩

🇧🇪
🇧🇪
🇧🇪
🇧🇪
🇧🇪

📐
📐
📐
📐
📐

<br>
<span class="emoji-xs">&#x1f4a9;</span><br>
<span class="emoji-s">&#x1f4a9;</span><br>
<span class="emoji-n">&#x1f4a9;</span><br>
<span class="emoji-l">&#x1f4a9;</span><br>
<span class="emoji-xl">&#x1f4a9;</span>

span.emoji-xs { font-size: 16px; }
span.emoji-s { font-size: 24px; }
span.emoji-n { font-size: 32px; }
span.emoji-l { font-size: 64px; }
span.emoji-xl { font-size: 96px; }

---

<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet">

<i class="em em-bird" aria-role="presentation" aria-label="BIRD"></i><br>

Handleiding:
emoji-css.afeld.me/

Meer emoji bronnen:

emoji-css.afeld.me

www.w3schools.com/charsets/ref_emoji.asp

Emoji maken met CSS

onaircode.com/html-css-emoji-examples-code
css-tricks.com/emoji-toggles/