Emoji and browsers with WordPress - html

Question

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.

Answer 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">☎</span>
<span class="icon">✉</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:
Create webfont with Unicode Supplementary Multilingual Plane
symbols

Answer 2

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 ☎</div>
<div id="email">EMAIL ✉</div>

Answer 3

To force the font renderer to use the non-emoji version, you can try using a Variation Selector.
<div>PHONE EMOJI ☎️</div>
<div>EMAIL EMOJI ✉️</div>
<div>PHONE TEXT ☎︎</div>
<div>EMAIL TEXT ✉︎</div>
See more: http://unicode.org/Public/8.0.0/ucd/StandardizedVariants.html