CODEWITHSUNDEEP
htmlcsswordpressunicodeemoji
Greeso
Greeso

Reputation: 8269

Emoji and browsers with WordPress

I am curretly creating a simple website. In the contact information section, I am adding this html entry ☎ for phone (right before the phone number), and this html entry ✉ for email address (right before the email address). The idea is to display those two characters as solid black characters (or any color for that matter if I choose to change the font color in CSS).

Anyway, what I ended up with is the emoji character represented by those two codes. I do not want this. I do not want the emoji representation to be displayed. I would like to see html representation as shown in the following two links:

http://www.fileformat.info/info/unicode/char/260e/index.htm

http://www.fileformat.info/info/unicode/char/2709/index.htm

(in the two links above, notice the 'phone' and the 'envolope' at the top of the page, this is what I want).

The font I am using is 'Lucida Console', and it is part of developing a theme in WordPress.

How can I do this?

Update

This seems to be a problem with WordPress. My html is part of a WordPress theme. When I try the solution with standalone web-pages, it works. However, when I try it within a theme set of files, only emoji is displayed.

So the question now becomes, how do I ensure this works in WordPress properly?

Update 2

It is suggested that this is question is a duplicate of Inconsistent Unicode Emoji Glyphs/Symbols

This is not a duplicate question. Just because they both deal with emoji, does not make them both duplicates. My question deals with emoji showing up in a web page when using a WordPress theme, the other question deals with inconsisten emoji characters in mobile devices.

Upvotes: 0

Views: 1319

Answers (3)

John Slegers
John Slegers

Reputation: 47111

You should include a webfont with support for the characters you want to use.

To include an icon font in your CSS, use the following code :

@font-face {
    font-family: 'myfont';
    src:url('fonts/myfont.eot?-td2xif');
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
        url('fonts/myfont.woff?-td2xif') format('woff'),
        url('fonts/myfont.ttf?-td2xif') format('truetype'),
        url('fonts/myfont.svg?-td2xif#myfont') format('svg');
    // Different URLs are required for optimal browser support
    // Make sure to :
    // 1) replace the URLs with your font's URLs
    // 2) replace `#myfont` with the name of your font
    font-weight: normal; // To avoid the font inherits boldness
    font-style: normal; // To avoid font inherits obliqueness or italic
}

.emoji {
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
    speak: none; // To avoid screen readers trying to read the content
    font-style: normal; // To avoid font inherits obliqueness or italic
    font-weight: normal; // To avoid the font inherits boldness
    font-variant: normal; // To avoid the font inherits small-caps
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
    line-height: 1; // To avoid the font inherits an undesired line-height
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}

You can then include your symbol like this:

<span class="icon">&#9742;</span>
<span class="icon">&#9993;</span>

If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for Emoji characters, which I created with the Icomoon App.

More info:

Upvotes: 1

Karol S
Karol S

Reputation: 9457

To force the font renderer to use the non-emoji version, you can try using a Variation Selector.

<div>PHONE EMOJI &#9742;&#65039;</div>
<div>EMAIL EMOJI &#9993;&#65039;</div>

<div>PHONE TEXT &#9742;&#65038;</div>
<div>EMAIL TEXT &#9993;&#65038;</div>

See more: http://unicode.org/Public/8.0.0/ucd/StandardizedVariants.html

Upvotes: 0

Shehroz Ahmed
Shehroz Ahmed

Reputation: 537

If I'm not wrong this is what you want 

#phone{
    font-family:Lucida Console;
    font-size:32px;
    color:red;
}
#email{
    font-family:Lucida Console;
    color:#e3e3e3;
    font-size:30px;
    
}
<div id="phone">PHONE &#9742;</div>
<div id="email">EMAIL &#9993;</div>

Upvotes: 0

Related Questions