Legg Emoji-støtte til ditt nettsted med Emoji CSS

Emojis har tatt over digitale samtaler, og disse søte, små ikonene gjennomsyret raskt internettkulturen med et slag. De er nå en daglig del av våre liv, og du kan finne dem overalt fra desktop apps til WordPress.

Og hvis du noen gang har ønsket egendefinerte emojis På nettstedet ditt er Emoji CSS det perfekte biblioteket å bruke.

Disse rene CSS-ikonene er generert med bakgrunnsbilder så hver emoji har sin egen PNG-fil. Disse bildefilene er retina-klar så de ser bra ut på alle skjermer.

Du kan også demo disse emojiene av inkludert den røde CSS-filen til nettstedet ditt. Filen refererer til selvbehandlede bilder på GitHub så Du trenger ikke å være vert for noe lokalt å komme i gang.

På Emoji CSS hjemmeside finner du alle bildekode klasser sammen med en prøve demo snippet. Når du har lagt til Emoji CSS-filen til dokumentet, er alt du trenger å gjøre, å legge til en element med .em klasse, sammen med hvilken klasse som helst, gjelder det spesifikke ikonet du vil vise.

Så for eksempel denne koden:

vil legge til 100 emoji direkte inn i nettstedets innhold. Du har det bra over 200 forskjellige emojier å velge mellom og prosjektet er åpen kilde så det er tilgjengelig for oppdateringer.

Best av alle Emoji CSS hjemmeside er super enkel å bruke. Bare klikk på et ikon og du vil Kopier automatisk kildekoden automatisk inn i utklippstavlen slik at du kan lime den rett inn i HTML-en din.

Jeg blir den første til å innrømme at ikke alle nettsteder vil ha nytte av dette Emoji-biblioteket, men sosiale nettverk og Comment-støttede nettsteder kan forbedre brukerengasjementet ved å legge til emoji-støtte. Og med Emoji CSS-biblioteket, er dette praktisk talt en to-trinns prosess for å emoji opp nettstedet ditt.