教程中心

给手机端添加登录图标

在自己想要的位置添加以下代码:

<!-- 移动端登录状态图标(修复颜色显示问题) -->
<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

效果如下: