Hexo + Butterfly 修改H1~H6标题图标

获取图标Unicide值

在 fontawesome上找到需要的图标，记录下Unicode值

配置文件

1. 在主题配置文件_config.butterfly.yml的beautify处，修改标题图标

   1beautify:
   2  enable: true
   3  field: post # site/post
   4  # title-prefix-icon: '\f0c1' 原锁链标题
   5  title-prefix-icon: '\f14e'
   6  title-prefix-icon-color: '#F47466'
   

2. 在\themes\butterfly\source\css目录下新建title_icon.css文件，添加：

    1/* 文章页H1-H6图标样式效果 */
    2h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    3    -webkit-animation: ccc 1.6s linear infinite ;
    4    animation: ccc 1.6s linear infinite ;
    5}
    6@-webkit-keyframes ccc {
    7    0% {
    8        -webkit-transform: rotate(0deg);
    9        transform: rotate(0deg)
   10    }
   11    to {
   12        -webkit-transform: rotate(-1turn);
   13        transform: rotate(-1turn)
   14    }
   15}
   16@keyframes ccc {
   17    0% {
   18        -webkit-transform: rotate(0deg);
   19        transform: rotate(0deg)
   20    }
   21    to {
   22        -webkit-transform: rotate(-1turn);
   23        transform: rotate(-1turn)
   24    }
   25}
   

3. 给 H1~H6 标题设置不同颜色，在title_icon.css中添加代码

    1#content-inner.layout h1::before {
    2    color: #ef50a8 ;
    3    margin-left: -1.55rem;
    4    font-size: 1.3rem;
    5    margin-top: -0.23rem;
    6}
    7#content-inner.layout h2::before {
    8    color: #fb7061 ;
    9    margin-left: -1.35rem;
   10    font-size: 1.1rem;
   11    margin-top: -0.12rem;
   12}
   13#content-inner.layout h3::before {
   14    color: #ffbf00 ;
   15    margin-left: -1.22rem;
   16    font-size: 0.95rem;
   17    margin-top: -0.09rem;
   18}
   19#content-inner.layout h4::before {
   20    color: #a9e000 ;
   21    margin-left: -1.05rem;
   22    font-size: 0.8rem;
   23    margin-top: -0.09rem;
   24}
   25#content-inner.layout h5::before {
   26    color: #57c850 ;
   27    margin-left: -0.9rem;
   28    font-size: 0.7rem;
   29    margin-top: 0.0rem;
   30}
   31#content-inner.layout h6::before {
   32    color: #5ec1e0 ;
   33    margin-left: -0.9rem;
   34    font-size: 0.66rem;
   35    margin-top: 0.0rem;
   36}