typecho框架Joe主题实现顶部页面图标

---

一、获取并理解源代码

1.1简介

首先，你需要找到你正在使用的Joe主题的源代码，通常这包括header.php或者相关的CSS、JS文件，其中包含了顶部图标的样式和HTML结构。分析并理解这些代码是如何加载和展示顶部图标的。

1.2代码

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建<a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>" title="首页">首页</a>
        <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
        <?php if (count($pages->stack) <= $this->options->JNavMaxNum) : ?>
          <?php foreach ($pages->stack as $item) : ?>
            <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><?php echo $item['title'] ?></a>
          <?php endforeach; ?>
        <?php else : ?>的。

二、设计并替换顶部图标

介绍

• 设计新的矢量图标：在阿里巴巴矢量图标库或者其他支持字体图标的平台上设计或选择你需要的新图标，并将它们添加到你的iconfont项目中。
• 更新图标映射：在 $iconClassMap 数组里关联每个页面slug与新设计或选择的图标的CSS类名。例如，如果你为“关于”页面设计了一个新的图标，并且该图标在iconfont.css中的类名为 icon-about，则应将其加入映射数组：
• 应用图标类名：在循环中，当匹配到相应的页面slug时，会自动给 标签赋予正确的图标类名，从而展示出设计好的新图标。

---

三、引用iconfont-阿里巴巴矢量图标库

• 为了在顶部图标中使用来自阿里巴巴矢量图标的字体图标，你需要先在iconfont.cn上注册并上传、管理你的图标。然后获取对应的在线CSS链接或者下载到本地引用。

• 假设你已经在iconfont.cn上完成了图标管理和项目创建，你可以获得一个在线CSS链接，通常格式如下：

引用代码

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4470129_d0s6krp92yp.css">

原文

原文地址！