Get Icon Unicode Value

Find the desired icon on fontawesome and note down the Unicode value.

Configuration File

  1. Modify the title icon in the theme configuration file _config.butterfly.yml under beautify:

    1beautify:
2  enable: true
3  field: post # site/post
4  # title-prefix-icon: '\f0c1' original chain title
5  title-prefix-icon: '\f14e'
6  title-prefix-icon-color: '#F47466'

  2. Create a new title_icon.css file in the \themes\butterfly\source\css directory and add:

     1/* Article page H1-H6 icon style effects */
 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. Set different colors for H1~H6 titles by adding the following code in 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}