0

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.

Community
  • 1
  • 1
Greeso
  • 7,544
  • 9
  • 51
  • 77
  • 1
    which font are you using? – Kaiido Jul 09 '15 at 04:18
  • Are you directly edditting the HTML themselves? Some WYSIWYG editors will escape the & character so it will display. One simple option is to just copy and paste it: ☎. – stevenw00 Jul 09 '15 at 04:22
  • It seems that Lucida Console doesn't have those characters in their character set, you have to define a fallback font which does have it to avoid the default system one – Kaiido Jul 09 '15 at 04:23
  • @stevenw00 - I am writing directly in the html file. It is part of the footer section for the website. Saved using eclipse. – Greeso Jul 09 '15 at 04:24
  • hu? you mean that you actually see `☎` instead of ☎ ? – Kaiido Jul 09 '15 at 04:26
  • @Kaiido - No, I see the emoji representation. In the case of a phone, it is a red phone, just like it is shown here: http://www.fileformat.info/info/unicode/char/260e/index.htm (look for the emoji section) – Greeso Jul 09 '15 at 04:30
  • Yes because it falls back to `Apple Color Emoji`or so if you're on another os, check [this fiddle](http://jsfiddle.net/ccL9uw3b/) – Kaiido Jul 09 '15 at 04:31
  • possible duplicate of [Inconsistent Unicode Emoji Glyphs](http://stackoverflow.com/questions/29659949/inconsistent-unicode-astrological-symbols-on-ios-osx) – 一二三 Jul 09 '15 at 08:35
  • 1
    @一二三 This is not a duplicate. The other question you are referring deals with mobile devices. I am dealing with web browsers and WordPress theme – Greeso Jul 09 '15 at 18:20
  • 1
    @Greeso The device makes no difference. The reason for the different visual style is that you didn't specify a "text style" vs. "emoji style" variation selector, and so you got the default for whatever font you were using. – 一二三 Jul 10 '15 at 05:26

3 Answers3

1

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:

Community
  • 1
  • 1
John Slegers
  • 45,213
  • 22
  • 199
  • 169
  • I probably misread your suggested answer, but it looks like it is trying to display the emoji character. However I do NOT want the emoji character. It is being displayed for me. I want the non-emoji charachter. – Greeso Jul 09 '15 at 04:32
  • @Greeso : The code provided will display whatever symbol you assign to ☎ or ✉ in the color you set for your font. So if your font uses the color black, it will display the symbol assigned to ☎ or ✉ in the color black. This could be a "phone" and "email" symbol, but it could be any other symbol as well if you customize your font. – John Slegers Jul 09 '15 at 04:37
  • @Greeso : You could try my Emoji icon font if you want. It supports both symbols. You can find a demo @ http://jslegers.github.io/emoji-icon-font/. If you decide to use it, however, I would recommend that you edit the font in the Icomoon app to remove all symbols except the ones you need, as that would reduce your filesize significantly! – John Slegers Jul 09 '15 at 04:40
0

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>
Shehroz Ahmed
  • 537
  • 4
  • 16
  • Except that Lucida Console doesn't have those characters in its character set so your code won't do anything – Kaiido Jul 09 '15 at 04:38
  • 1
    Not working :( Is it because I am using wordpress? I will create a simple webpage that is non-wordpress and see how ti goes. – Greeso Jul 09 '15 at 04:46
  • Try using font awesome. or give inline color using style attribute – Shehroz Ahmed Jul 09 '15 at 04:48
  • Example :
    PHONE ☎
    I Hope it will surely work in wordpress     – Shehroz Ahmed Jul 09 '15 at 04:49
  • The CSS works, however the problem seems to be WordPress. I did a standalone test, and it looks like it is workig. However, when used with WordPress, only emoji is used. – Greeso Jul 09 '15 at 05:14
0

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

Karol S
  • 9,028
  • 2
  • 32
  • 45