Page 1 of 1
Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 3:50 am
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?
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 8:45 am
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...
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 8:53 am
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.
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 9:56 am
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).
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 10:03 am
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?
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 10:32 am
by requinix
The big 18 is an image but the others are text.
Copy. And. Paste.
You don't really need CSS.
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 10:35 am
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?
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 2:58 pm
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.
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 3:02 pm
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?
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 16, 2017 7:23 pm
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 */; }
Re: Emoji usage on webpages - how do you install?
Posted: Wed May 17, 2017 5:45 am
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.
Re: Emoji usage on webpages - how do you install?
Posted: Wed May 17, 2017 6:30 am
by requinix
FFS.
It's not imagery. They're actual characters. Just like all those other things you can type with your keyboard.
Re: Emoji usage on webpages - how do you install?
Posted: Mon May 22, 2017 10:18 am
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?
Re: Emoji usage on webpages - how do you install?
Posted: Mon May 22, 2017 10:26 am
by requinix
Unicode emojis are not protected because they are text characters. Nobody can copyright those.
An image emoji, like

, 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).
Re: Emoji usage on webpages - how do you install?
Posted: Tue May 23, 2017 10:09 am
by Elli Sophia
requinix wrote:Unicode emojis are not protected because they are text characters. Nobody can copyright those.
An image emoji, like

, 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!