在自己想要的位置添加以下代码:
<!-- 移动端登录状态图标(修复颜色显示问题) -->
<style>
/* 仅在移动端显示 */
@media (min-width: 768px) {
.mobile-login-icon {
display: none !important;
}
}
@media (max-width: 767px) {
.mobile-login-icon {
display: inline-flex !important;
align-items: center;
margin-right: 2px;
position: relative;
z-index: 999;
}
.mobile-search-btn {
display: inline-flex !important;
align-items: center;
}
.login-icon {
width: 18px !important;
height: 18px !important;
display: block !important;
overflow: visible !important;
}
/* 已登录图标强制蓝色 */
.login-icon.logged-in {
fill: #3B82F6 !important;
color: #3B82F6 !important;
}
/* 未登录图标强制灰色 */
.login-icon.not-logged-in {
fill: #9CA3AF !important;
color: #9CA3AF !important;
}
}
</style>
<div class="mobile-login-icon" style="display: none;">
<?php if (User::isVisitor()): ?>
<!-- 未登录图标 -->
<a href="<?= BLOG_URL ?>admin" style="display: inline-flex; align-items: center; padding: 2px;">
<svg class="login-icon not-logged-in" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M136.4 128a120 120 0 1 1 240 0 120 120 0 1 1 -240 0zm-88 354.3c0-98.5 79.8-178.3 178.3-178.3l59.4 0c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7L78.1 512c-16.4 0-29.7-13.3-29.7-29.7zM612.3 124.1c9.4 9.4 9.4 24.6 0 33.9l-33.9 33.9 33.9 33.9c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-33.9-33.9-33.9 33.9c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l33.9-33.9-33.9-33.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l33.9 33.9 33.9-33.9c9.4-9.4 24.6-9.4 33.9 0z"/>
</svg>
</a>
<?php else: ?>
<!-- 已登录图标 -->
<a href="<?= BLOG_URL ?>user" style="display: inline-flex; align-items: center; padding: 2px;">
<svg class="login-icon logged-in" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M286 304c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7L78 512c-16.4 0-29.7-13.3-29.7-29.7 0-98.5 79.8-178.3 178.3-178.3l59.4 0zM585.7 105.9c7.8-10.7 22.8-13.1 33.5-5.3s13.1 22.8 5.3 33.5L522.1 274.9c-4.2 5.7-10.7 9.4-17.7 9.8s-14-2.2-18.9-7.3l-46.4-48c-9.2-9.5-9-24.7 .6-33.9 9.5-9.2 24.7-8.9 33.9 .6l26.5 27.4 85.6-117.7zM256.3 248a120 120 0 1 1 0-240 120 120 0 1 1 0 240z"/>
</svg>
</a>
<?php endif; ?>
</div>
想要更换图标自己去fontawesome寻找替换svg
效果如下:

