Butterfly 主题魔改 - 标题图标样式

博文迁移计划：本文由博客旧站迁移而来，仅对图片和错误显示的文字进行勘误翻新，对博文本身所述内容不做更改，望周知
魔改系列提示：本教程适用于原版 Butterfly 主题，对其衍生再发行版本的可用性不做保证

前言

魔改永无止境，借鉴永不停止！

参考教程
查看效果

Preview

修改主题配置文件

修改 _config.butterfly.yml

1
2
3
4
5
6
7
beautify:
  enable: true
  field: post # site/post
- title-prefix-icon: # '\f0c1'
- title-prefix-icon-color: # '#F47466'
+ title-prefix-icon: '\f863'
+ title-prefix-icon-color: "#F47466"

修改自定义CSS文件

以下CSS样式可添加进任何已引入的.css文件中
例如，在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/* 文章页H1-H6图标样式效果 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 1.6s linear infinite;
  animation: ccc 1.6s linear infinite;
}
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
#content-inner.layout h1::before {
    color: #ef50a8;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
  }
  #content-inner.layout h2::before {
    color: #fb7061;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
  }
  #content-inner.layout h3::before {
    color: #ffbf00;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
  }
  #content-inner.layout h4::before {
    color: #a9e000;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
  }
  #content-inner.layout h5::before {
    color: #57c850;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0rem;
  }
  #content-inner.layout h6::before {
    color: #5ec1e0;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0rem;
  }
  #content-inner.layout h1:hover, /*本站已删除此行代码*/
  #content-inner.layout h2:hover,
  #content-inner.layout h3:hover,
  #content-inner.layout h4:hover,
  #content-inner.layout h5:hover,
  #content-inner.layout h6:hover {
    color: rgb(90,135,255);
  }
  #content-inner.layout h1:hover::before,
  #content-inner.layout h2:hover::before,
  #content-inner.layout h3:hover::before,
  #content-inner.layout h4:hover::before,
  #content-inner.layout h5:hover::before,
  #content-inner.layout h6:hover::before {
    color: rgb(90,135,255);
    -webkit-animation: ccc 3.2s linear infinite;
    animation: ccc 3.2s linear infinite;
  }
  
/* 页面设置icon转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
    animation: fa-spin 5s linear infinite;
  }

完成

如你所见，就是这么简单
请使用 Hexo三连 秘法
然后进入任意文章查看效果