在独立页面前添加图标

AI摘要：本文提供了在Typecho独立页面前添加图标的详细步骤，包括修改header.php文件中的代码，使用阿里巴巴矢量图标库选择图标，并在页面中生成和添加CSS代码。按照这些步骤操作，可以使独立页面的导航更加美观和直观。

Powered by Moonshot AI

前言

我们在使用typecho的时候，如果想在独立页面前面添加一些好看的图标，该如何操作呢？

教程

第一步

首先在header.php中找到以下代码

 <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 : ?>
                    <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) 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; ?>

第二步

将上述代码更换为以下代码

<a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><i class="iconfont icon-<?php echo $item['slug'] ?>"></i> <?php echo $item['title'] ?></a>
                    <?php endforeach; ?>
                <?php else : ?>
                    <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?>
                        <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"><i class="iconfont icon-<?php echo $item['slug'] ?>"></i> <?php echo $item['title'] ?></a>
                    <?php endforeach; ?>

第三步

其次同样在header.php中找到以下代码

<a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>" title="首页">首页</a>

第四步

将上述代码更换为以下代码

<a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>" title="首页"><i class="iconfont icon-shouye"></i> 首页</a>

第五步

登录阿里巴巴矢量图标库
点此进入
首先进入此网站进行登录注册
选择icon图标库，选择一个你想要的图标加入购物车，之后创建一个项目，把你选择这个图标添加至你的项目里面，在我的项目里面可以进行项目配置

第六步

打开你的管理后台，独立页面里面，把缩略名进行更改，可以随机命名，要求与图标的Font Class / Symbol一致，最后生成其css代码
生成css代码教学：
选择图标 添加至购物车 之后添加至项目 点击更新代码 选择Font clss 复制css代码

第七步

在控制台选择独立页面 要求缩略名和图标名字一致 使其相互对应

第八步

把生成的css代码放在自定义配置里面， 刷新网页，发现图标已经显示了，完结撒花❀❀❀

2023-03-22 19:27:44 星期三