如何使unicode在桌面视图中显示

Question

我有几个unicode，它们显示在移动设备上，而不显示在台式机上。

我假设我不能强制@media查询。

HTML片段：

<a href="https://adsler.co.uk/wp-user-test-dashboard- 
    2/awpcp-reply-to-ad/21/old-goriot-balzac/">
  <div class="email"><span><center>&#x1F4E7</center>. 
    </span></div>
</a>
<a href="tel:<br/><label>Phone: 
    </label> 07576335122">
  <div class="phone"><span>. 
    <center>&#128222</center></span></div>
</a>
<a href="http://maps.google.com/?q=:<br/>. 
    <label>Location:</label> Westminster, London, UK">
  <div class="location"><span><center>&#x1F4CD</center>. 
     </span></div>
</a>

这是原始源代码：

<div id="showawpcpadpage"> <div class="awpcp- 
title">$ad_title</div><br/> <div 
class="showawpcpadpage"> $featureimg <div 
class="awpcp-subtitle">Contact Information</div> <a 
href="$codecontact"><div class="email"><span>. 
<center>&#x1F4E7</center></span></div></a><a 
href="tel:$adcontactphone"><div class="phone"><span>. 
<center>&#128222</center></span></div></a> <a 
href="maps.google.com/?q=:$location"><div 
class="location"><span><center>&#x1F4CD</center>. 
</span></div></a> <div class="visit-website"><Visit 
Website:</div> $awpcpvisitwebsite </div>

这是控制页面布局的完整代码。

 <div id="showawpcpadpage">
 <div class="awpcp-title">$ad_title</div><br/>
 <div class="showawpcpadpage">
 $featureimg


 <div class="awpcp-subtitle">Contact Information</div>


<a href="$codecontact"><div class="email"><span>. 
<center>&#x1F4E7</center></span></div></a><a 
href="tel:$adcontactphone"><div class="phone"><span>. 
<center>&#128222</center></span></div></a>
<a href="http://maps.google.com/?q=:$location"><div 
class="location"><span><center>&#x1F4CD</center>. 
 </span></div></a>

 <div class="visit-website"><Visit Website:</div>
 $awpcpvisitwebsite

   </div>
  $aditemprice
  $awpcpextrafields
  <div class="fixfloat"></div>
  $showadsense1
  <div class="showawpcpadpage">
  <div class="awpcp-subtitle">More Information</div>
  $addetails
  </div>
  $showadsense2
  <div class="fixfloat"></div>
  <div id="displayimagethumbswrapper">
  <div id="displayimagethumbs">
  <ul>
  $awpcpshowadotherimages
  </ul>
  </div>
  </div>
  <span class="fixfloat">$tweetbtn $sharebtn 
  $flagad</span>
  $awpcpadviews
  $showadsense3
  $edit_listing_link
  </div>

这就是我拥有的所有代码，它可以控制整个布局。您是否认为可能需要进行一些修改以阻止此br标签的东西进入位置？

Answer 1

它们确实显示在桌面上。这仅取决于设备是否支持表情符号。

请确保从其中删除文本修饰，以确保没有蓝色超链接。

或者，您可以使用表情符号CSS之类的东西。

将<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">添加到您的头部，然后将它们链接为i类<i class="em em-airplane"></i>，有关所有受支持的表情符号的列表，请参见here。然后，您无需担心设备支持。我建议您更好地设置HTML格式，以使其更具可读性。

Update

如果您这样链接，请确保关闭文本修饰。使用表情符号并不需要将其删除。

<a href="https://flights.google.com"><i class="em em-airplane"></i></a>将在用户点击飞机后将其带到Google航班。

<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
 
<div id=links>
<a href="#maillink"> <i class="em em-email"></i> Email hello@example.com</a><br>
<a href="#phonelink"> <i class="em em-phone"></i> Phone 0000 000 0000</a><br>
<a href="#pinlink"> <i class="em em-pushpin"></i> London, UK</a><br>
</div>

<style>
a {
text-decoration: none;
}
</style>

确保关闭链接的文字修饰。

Answer 2

这是一种更好的格式。您的HTML混乱不堪，加上引号和其他恐怖内容

请注意，由于使用沙箱，您需要使用鼠标右键在新窗口中打开Goog​​le地图链接

a { text-decoration:none }

<a href="mailto@aaa.bbb.com">
  <span class="email">&#x1F4E7</span> Email: aaa@bbb.com
</a><br/>
<a href="tel:99999999">
  <span class="phone">&#128222</span>
  <label>Phone:</label> 999999999
</a><br/>
<a href="https://maps.google.com/?q=Westminster,London,UK" target="_blank">
  <span class="location">&#x1F4CD</span>
  <label>Location:</label> Westminster, London, UK
</a>

我在Chrome浏览器中看到了