如何修改google-nexus-website-menu组件的菜单选项及图标

算力阿峰

2026-10-13

谷歌Nexus风格菜单图标修改/添加操作指南

替换现有图标

打开项目中的菜单样式文件style.css，搜索.gn-icon开头的类名，每个菜单项的图标都对应一个独立的类，比如首页菜单对应.gn-icon-home、分类菜单对应.gn-icon-category
这个菜单的图标默认用字体图标实现，如果你要直接替换成自定义图片，直接修改对应类的样式即可，示例代码如下：

/* 原字体图标样式 */
.gn-icon-home::before {
    content: "\e001";
    font-family: 'nexus-icons';
}

/* 替换为自定义本地图标 */
.gn-icon-home {
    background: url("./images/custom-home-icon.png") no-repeat left center;
    background-size: 24px 24px; /* 和原有图标尺寸保持一致可避免布局偏移 */
    padding-left: 32px; /* 根据图标大小调整文字和图标的间距 */
}
.gn-icon-home::before {
    content: ""; /* 清除原有字体图标内容 */
}

给新增菜单项添加图标

先在HTML的菜单结构中给新增的菜单项加自定义图标类，示例如下：

<li>
  <a href="/new-page" class="gn-icon gn-icon-new-item">新菜单选项</a>
</li>

再在CSS文件中新增对应类的样式规则，和替换图标的逻辑一致：

.gn-icon-new-item {
    background: url("./images/new-item-icon.png") no-repeat left center;
    background-size: 24px 24px;
    padding-left: 32px;
}
.gn-icon-new-item::before {
    content: "";
}