Emoji usage on webpages - how do you install?

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Emoji usage on webpages - how do you install?

Post by simonmlewis »

http://emojipedia.org

We are trying to get 18 age rated icons, and this site does them. But unlike Font Awesome, where it shows you the CSS code to you, and then the code to render the icon on screen - this site doesn't 'seem to do that.

How does it work?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Emoji usage on webpages - how do you install?

Post by requinix »

They're actual Unicode characters, which you can copy and paste just like any other text. And just like any other text, you do need to have the right font(s) installed and available - but it seems most modern systems do now.

I'd demonstrate the copy-and-paste thing except it seems our version of phpBB doesn't exactly support it...
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Emoji usage on webpages - how do you install?

Post by simonmlewis »

So if I wanted to get an '18' o screen using Unicode, how would I do that? I've seen several that are coloured images.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Emoji usage on webpages - how do you install?

Post by requinix »

You find a place that lists the characters and you copy-and-paste. If you're on Windows then you can also use the Character Map to find a few using an "Emoji" font (eg, Segoe UI Emoji) - Mac and Linux may have something similar.

Just make sure you paste the characters somewhere else, like Notepad or a textbox on a website, to make sure it's working: before emoji there were fonts like Wingdings which give different glyphs for normal characters (like " is a pair of scissors).
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Emoji usage on webpages - how do you install?

Post by simonmlewis »

http://emojipedia.org/microsoft/windows ... en-symbol/
So let's say I want to use this one - how do I find the Unicode to do it, and what CSS do I need to include to make it work?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Emoji usage on webpages - how do you install?

Post by requinix »

The big 18 is an image but the others are text.

Copy. And. Paste.

You don't really need CSS.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Emoji usage on webpages - how do you install?

Post by simonmlewis »

The reason I want an 'icon' is so that the image and text line up, without the need for any CSS. Like Font Awesome does (tho they don't have an '18' icon.
Is there some icon version out there that can do an '18' round icon?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Emoji usage on webpages - how do you install?

Post by Christopher »

simonmlewis wrote:The reason I want an 'icon' is so that the image and text line up, without the need for any CSS. Like Font Awesome doe...
But Font Awesome uses CSS?

If it is on a web page, it's either CSS or an image.
(#10850)
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Emoji usage on webpages - how do you install?

Post by simonmlewis »

Yes? Sorry I am lost. I get it that the Emojis are not fonts, but I still don't know how to do it.
Could you show me an example of how to make an 18 show up please?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Emoji usage on webpages - how do you install?

Post by requinix »

Whether you use images or text, adjusting their positioning with CSS isn't difficult. Give it a class

Code: Select all

<img class="emoji" src="/path/to/emoji.gif" alt="<18">
<span class="emoji">(insert character here)</span>
then move it with preferably vertical-align

Code: Select all

.emoji { vertical-align: /* try a few. text-top and text-bottom may do the trick */; }
or else literal positioning

Code: Select all

.emoji { position: relative; top: /* -1px or -0.1ex or something */; }
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Emoji usage on webpages - how do you install?

Post by simonmlewis »

That works great. Just used an icon of around 30px, and it worked.
Stil unsure about the whole emoji thing with CSS imagery, but this idea worked.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Emoji usage on webpages - how do you install?

Post by requinix »

FFS.

It's not imagery. They're actual characters. Just like all those other things you can type with your keyboard.
Elli Sophia
Forum Newbie
Posts: 15
Joined: Mon May 08, 2017 10:35 am

Re: Emoji usage on webpages - how do you install?

Post by Elli Sophia »

Quick question..but aren't emojis protected by copyright just like different fonts?...So that basically means you would have to ask for the right to copy and paste them for use?
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Emoji usage on webpages - how do you install?

Post by requinix »

Unicode emojis are not protected because they are text characters. Nobody can copyright those.

An image emoji, like :D :) :(, could be copyrighted or otherwise restricted by licensing. Likewise the particular gylph that a font uses for a Unicode emoji character could also be copyrighted, but that would be the case for the entire font - and copyright only matters there when it comes to distributing the font file (so using it on a site and hoping the user has it installed is fine).
Elli Sophia
Forum Newbie
Posts: 15
Joined: Mon May 08, 2017 10:35 am

Re: Emoji usage on webpages - how do you install?

Post by Elli Sophia »

requinix wrote:Unicode emojis are not protected because they are text characters. Nobody can copyright those.

An image emoji, like :D :) :(, could be copyrighted or otherwise restricted by licensing. Likewise the particular gylph that a font uses for a Unicode emoji character could also be copyrighted, but that would be the case for the entire font - and copyright only matters there when it comes to distributing the font file (so using it on a site and hoping the user has it installed is fine).
Oh good to know. I had previously thought that all Emoji's could be categorised under one belt. But i guess not since like you mentioned ..i.e that Unicode emojis are not protected because they are text characters. This i did not know so thanks for clarifying that!
Post Reply