Hexo + next add bilibilibili icon through custom style

Next uses the Font Awesome library as the icon library by default. However, some Chinese social network ICONS are not available in the Font Awesome library, including the familiar ones Bilibili, Douban, and Jianshu. So if we want to use these ICONS, we need to manually add them using local ICONS.
First, you can find the icon you need on a site like Alibaba’s Vector Icon Library and download it in SVG format. Bilibili, for example, the SVG files placed in hexo engineering/source/images/Bilibili SVG.
Edit the source/_data/styles.styl file (create your own if you don’t) and add the following styles:

.fa-bilibili {
  background: url(/images/bilibili.svg);
  background-position: 50% 75%;
  background-repeat: no-repeat;
  height: 1rem;
  width: 1rem;
}

Note: Source under the Hexo project directory, not the source under the theme
Next, uncomment the style section of custom_file_path in the theme configuration file (such as theme/next/_config.yml).

custom_file_path:
  style: source/_data/styles.styl

Finally, reference it in the social link of the theme configuration file (such as theme/next/_config.yml).

social:
  Bilibili: https://space.bilibili.com/userid/ || fab fa-bilibili


I failed with hexo-cli 4.2.0 and NexT 8.2.1. Can anyone tell me how?
Reference reading:
https://theme-next.js.org/docs/advanced-settings/custom-files.html#Custom-Icon-Imagehttps://www.zywvvd.com/2020/03/28/next/20_custom_style/custom-style/

Read More: