Voeg Emoji-ondersteuning toe aan uw website met Emoji CSS

Emoji's hebben digitale gesprekken overgenomen en deze schattige kleine pictogrammen drongen snel door in de internetcultuur. Ze zijn nu een dagelijks onderdeel van ons leven en je kunt ze overal vinden, van desktop-apps tot WordPress.

En als je ooit hebt gewild aangepaste emoji's op uw site dan is Emoji CSS de perfecte bibliotheek om te gebruiken.

Deze pure CSS-pictogrammen zijn gegenereerd met achtergrondafbeeldingen zo Elke emoji heeft een eigen PNG-bestand. Deze beeldbestanden zijn retina-klaar zodat ze er geweldig uitzien op alle monitoren.

Je kunt deze emoji's ook demonstreren via inclusief het onbewerkte CSS-bestand op uw site. Het bestand verwijst naar zelf-gehoste afbeeldingen op GitHub dus je hoeft niets lokaal te hosten starten.

Op de Emoji CSS-startpagina vindt u alle beeldcodeklassen samen met een voorbeeld van een demofragment. Zodra u het Emoji CSS-bestand aan uw document heeft toegevoegd, hoeft u alleen maar een toe te voegen element met de .em klas, samen met welke klasse dan ook gerelateerd aan het specifieke pictogram dat je wilt laten zien.

Dus bijvoorbeeld deze code:

voegt de 100 emoji rechtstreeks toe aan de inhoud van uw site. Je hebt het goed meer dan 200 verschillende emoji's om uit te kiezen en het project is open source dus het is beschikbaar voor updates.

Het beste van alles op de Emoji CSS-startpagina is supereenvoudig in gebruik. Net klik op een pictogram en je zult automatisch die broncode kopiëren naar het klembord, zodat u het rechtstreeks in uw HTML kunt plakken.

Ik zal de eerste zijn om toe te geven dat niet elke website zal profiteren van deze Emoji-bibliotheek, maar sociale netwerken en Door commentaar ondersteunde websites kunnen de betrokkenheid van gebruikers vergroten door emoji-ondersteuning toe te voegen. En met de Emoji CSS-bibliotheek is dit praktisch een proces in twee stappen om uw site te emoji-upten.