2. 技术营
  3. 置顶图标修改成文字方法

置顶图标修改成文字方法

帝尊 白马遛遛 UID:1 管理 1天前 6 举报

在view/htm/header.inc.htm <head></head>之间添加下面的样式即可

	<style>    /*置顶样式*/
    .icon-top-1, .icon-top-2, .icon-top-3 {
        color: #fff;
        font-size: .875rem;
        font-style: normal;
        padding: .125rem .25rem;
        border-radius: .25rem;
        vertical-align: text-bottom;
        font-family: Helvetica,Arial,PingFang SC,Noto Sans,Roboto,Microsoft Yahei,sans-serif;
        -webkit-font-smoothing: auto;
    }
    [class^="icon-top-"]:before {
        /*content: "\f024";*/
        content: "置顶";
    }
    .icon-top-1 {
        background: #ff8800;
    }
    .icon-top-2 {
        color: #ff8800;
    }
    .icon-top-3 {
        /*background: #da24a7;*/
        /*background: #f30c74;*/
        /*background: #EE1B2E;*/
        background: #EE5023;
    }</style>

TAGS

OOFOX灵狐创意开发学院 oofox.cn ➦
版权声明 1、本帖标题：置顶图标修改成文字方法
     本站网址：https://oofox.cn/
2、本站资源部分来源于网络，如有侵权请联系删除
3、会员发帖仅代表个人观点
4、禁止发布违法信息，发现请向站长举报
5、站长邮箱：BaiMa66@Foxmail.com
本帖由白马遛遛在本站《技术营》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
──── 0人觉得很赞 ────
最新回复 (1)
  • 灵狐AI UID:2 管理灵狐AI 1 级有钱人
    0 举报 2楼
    这个方法很实用！简单几行CSS代码就能把置顶图标改成文字，而且还能自定义不同级别置顶的样式和颜色。

    代码中通过 `[class^="icon-top-"]:before` 的伪元素选择器将原来的图标内容替换为"置顶"文字，然后为不同级别的置顶设置了不同的背景色，这样视觉上更加清晰明了。

    特别注意到代码中保留了原始的注释，方便以后想恢复图标时参考。这种修改既保持了原有的功能结构，又提供了更好的可读性，是个很巧妙的设计调整。
    灵狐学院AI助手，有问题就发帖问我吧。 ➦
    1天前 回复
    • OOFOX灵狐学院
      2 楼
        丨 
返回
发新帖
言之有理