add new tab, lost logo

[SepineTam]

Issue Checklist

• [X] I am using NexT version 8.0 or later.
• [X] I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
• [X] I have already searched for current issues, which does not help me.

Expected behavior

I hope while i change the file "themes/next/_config.yml" about menu task, i could add new tab i like. While i add a github tab, and add a link, the logo dismisses. Hope to make the logo visionable.

Actual behavior

• Links to demo site with this issue:
• Links to repository or source code of the blog:
• Screenshots:

The first page is theme's _config.yml file, i add the 124th line is github

and the second pic is fontawesome website's logo link.

and here is the looks of the demo which i made

however i change the index.html about the github place from <a href="https://github.com/sepinetam/" rel="noopener" target="_blank"><i class="fa fa-github fa-fw"></i>Github</a> to <a href="https://github.com/sepinetam/" rel="noopener" target="_blank"><i class="fa-brands fa-github"></i>Github</a> it is also looks like that.

Steps to reproduce the behavior

first i add the "themes/next/_config.yml" file's 124th line to Github: https://github.com/sepinetam/ || fa-brands fa-github and the second step i did is run

hexo clear
hexo generate
hexo server

and i open it, which looks like here⬇️

Node.js and NPM Information

node -v && npm -v
v22.4.0
10.8.1

Package dependencies Information

npm ls --depth 0
hexo-site@0.0.0 /Users/sepinetam/Documents/Github/sepinetam.github.io
├── hexo-deployer-git@4.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.3.0
├── hexo-renderer-stylus@3.0.1
├── hexo-server@3.0.0
├── hexo-theme-landscape@1.0.0
└── hexo@7.3.0

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Sepine's Blog
subtitle: '谭淞的小破站'
description: ''
keywords:
author: Sepine Tam
language: en
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
# Themes: https://hexo.io/themes/
# theme: amazing
# theme: landscape
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:sepinetam/blog.git
  branch: main

NexT Configuration

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  Github: https://github.com/sepinetam/ || fa-brands fa-github
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

Other Information

No response

[welcome[bot]]

Thanks for opening this issue, maintainers will get back to you as soon as possible!

[sghuang19]

Hi Sepine,

The syntax of embedding an icon in NexT is slightly different from directly embedding in HTML. It should be fa instead of fa-brand. You should follow the examples set by the default tabs.

As a side note, it is recommended to use a theme config file _config.next.yml in the root dir instead of theme/next/_config.yml. See docs of Hexo and NexT for more details.

[SepineTam]

Thank you for your reply, but the answer is consist exist. I change it from Github: https://github.com/sepinetam/ || fa fa-brand fa-github to Github: https://github.com/sepinetam/ || fa fa-github, but that is no use. I also have tried fa fa-github, fa fa-brand fa-github, fa-github, However that is no use.

[jasonren0403]

try

Github: <your link> || fab fa-github

[SepineTam]

still no use with fab fa-github

[sghuang19]

still no use with fab fa-github

This works for me. Take a look at my repo:

https://github.com/sghuang19/portfolio/blob/4ff6ad441e04e3c9be80de0d8942c44f981a3680/_config.next.yml#L176-L177

Which version of Hexo and NexT are you using? Maybe try fresh install the engine and theme.