Emoji usage on webpages - how do you install?
Moderator: General Moderators
-
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?
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?
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.
All the best from the United Kingdom.
Re: Emoji usage on webpages - how do you install?
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...
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?
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.
All the best from the United Kingdom.
Re: Emoji usage on webpages - how do you install?
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).
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?
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?
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.
All the best from the United Kingdom.
Re: Emoji usage on webpages - how do you install?
The big 18 is an image but the others are text.
Copy. And. Paste.
You don't really need CSS.
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?
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?
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.
All the best from the United Kingdom.
- 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?
But Font Awesome uses CSS?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...
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?
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?
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.
All the best from the United Kingdom.
Re: Emoji usage on webpages - how do you install?
Whether you use images or text, adjusting their positioning with CSS isn't difficult. Give it a class
then move it with preferably vertical-align
or else literal positioning
Code: Select all
<img class="emoji" src="/path/to/emoji.gif" alt="<18">
<span class="emoji">(insert character here)</span>Code: Select all
.emoji { vertical-align: /* try a few. text-top and text-bottom may do the trick */; }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?
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.
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.
All the best from the United Kingdom.
Re: Emoji usage on webpages - how do you install?
FFS.
It's not imagery. They're actual characters. Just like all those other things you can type with your keyboard.
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?
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?
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).
An image emoji, like
-
Elli Sophia
- Forum Newbie
- Posts: 15
- Joined: Mon May 08, 2017 10:35 am
Re: Emoji usage on webpages - how do you install?
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!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).