在一些手机上,汉堡图标的三条水平线呈现为"X"。在其他手机和台式机中,汉堡图标正确地呈现为三条水平线。更具体地说,它在所有浏览器上的所有小米手机上都有。
<Head>
代码为
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<Body>
代码为
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰Menu</div>
<div class="site-name">ABCD</div>
我不得不插入一个丑陋的文本"菜单"。
快照附件。在此处输入图像描述
您看到的符号-看起来有点像盒子里的X
-是Android符号,表示"我在内置字体中找不到这个字符。">
您需要为该特定字符(U+2630)提供一个字体或图标字体。
至于为什么小米不支持。。。这可能是因为☰是中国"升天八卦"的象征。它们可能没有在非中文手机上包含中文字体。
您可以用CSS绘制图标,而不是希望每个客户端都有相同的字体。
.hamburger {
display: inline-block;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
}
<div role="button" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
如果你的客户端没有特定的字体,有一些方法可以修复它:
- 使用字体CDN我更喜欢使用字体真棒
- 根据要求提供字体
使用字体CDN
由于这种方法更适合,因为您不想包含随机字体,但希望使用字体来显示图标。我建议你用FontAwesome。它只提供了更多有趣和免费的图标来使用。
只需将其包含在他们的起始页中:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
要使用汉堡图标,只需这样做:
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"><i class="fas fa-bars"></i><span>Menu</span></div>
<div class="site-name">ABCD</div>
<i class="fas fa-bars"></i>
部分包括图标。fa-bars
类用于引用特定的FontAwesome图标。例如,将其更改为fa-caret-down
以查看此图标。
请注意,我不确定是否还需要hamburger
css类,因为您还没有共享它的代码。只是说,这个解决方案将包括没有任何css的图标。
根据要求提供字体
只需将您的字体上传到wwwroot/font
文件夹,并将其链接到您的css中即可:
/*default version*/
@font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font.eot');
src:
local('Lovely Font'),
local('Lovely-Font'),
url('fonts/lovely_font.otf')
format('opentype');
}
/*bold version*/
@font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font_bold.eot');
src:
local('Lovely Font Bold'),
local('Lovely-Font-Bold'),
url('fonts/lovely_font_bold.otf')
format('opentype');
font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }
请务必查看此链接。
摘要
我显然会选择CDN/FontAwesome方法,因为它提供了更多的可用性。浏览你想要的任何图标,并轻松地将其包含在内。另一方面,它还为你的项目添加了一个新的依赖项,这通常不是一个理想的选择。
如果是这样,请使用交付自己的字体的方法。确保它包含你需要的图标,你就可以去了。如果您真的需要提供自己的字体,那么这个解决方案将是最好的选择。它也可以包含一个简化版的公司标志或其他什么。
我希望这能为你澄清问题。如果您对当前解决方案不起作用的原因感兴趣,请查看terence eden的答案。