[Feature Request] Add way to change the prefix for each icon about vuepress-theme-hope

[Mister-Hope]

Excuse me, I read the docs you provided and what I saw is that the front awesome 5 needs fa- prefix.

I am providing an option which can add this prefix on all of your icon.

If you are suggesting to change the default value, I am afraid I will not accept it.

The reason I am using icon- for default is that most of my theme users including myself are chinese, and we use iconfont.

If you have other problems, welcome to decribe more specificly.

[ItsBioDude]

Sorry, Mr.Hope. This is quite misleading. I don't mean to change the default value. May be the explanation below is better
Let's take a look at the picture below:

As you see, each icon have different prefix: fas, far, fal, fad, fab which mean that you have to set different prefixes to every individual icon instead of adding this prefix on all icon

For example:
We will use icon: "fas fa-camera" instead of:

icon: "fa-camera"
iconPrefix: "fas ",

[Mister-Hope]

Got it, currently I am on a trip, I will try to provide better support after I return home.

[Mister-Hope]

I was thinking to make a better enhancement, but I am not catching up some great ideas. If you are using only one style of icon in your site, I think it's possible for you to set iconPrefix to fas fa- or far fa- and so on. Then it will be easy for you to set the prefix. If you are using different icons accross the site, I can not provide with some options for you to group those icons with same style.

The only thing I can enhance is that:

1. Providing three optional options: navbarIconPrefix sidebarIconPrefix pageIconPrefix.
2. Let all the icon key support both string and string[]

I will consider the second one as a good enhancement, But I am not sure we really need the first one.

[ItsBioDude]

The first one is useless anyway.
The second look better than the first one
Actually their is a small workaround for this:

iconPrefix:" " //Avoid adding prefix
icon: "fas fa-camera"
icon: "far fa-camera" //Set it manually
// Don't know if adding a boolean to disable iconPrefix setting may be good as well

[Mister-Hope]

Hey there, below is my code:

  private get iconPrefix(): string {
    const { iconPrefix } = this.$themeConfig;

    return iconPrefix === "" ? "" : iconPrefix || "icon-";
  }

So I think you can just use iconPrefix: "" to unset the default prefix.(I wound prefer one configuation to be a certain type instead of adding a false value)

Besides, i am not sure if the style class must be placed before the icon type class, so I think

// config
iconPrefix: "fa-"

icon: "camera fas"
icon: "camera far"

would be better.

[Mister-Hope]

Also, I think again for the second improvement, and I decide not to do it.

Before:

JS:

icon: "fas fa-camera"

Front matter:

icon: fas fa-camera

---

After:

JS:

icon: ["fas", "fa-camera"]

Front matter:

icon:
  - fas
  - fa-camera

It's making configuration more complicated.

[ItsBioDude]

Besides, i am not sure if the style class must be placed before the icon type class, so I think

// config
iconPrefix: "fa-"

icon: "camera fas"
icon: "camera far"

would be better.

I think so, because all fontawesome's icon have fa- and this way look better

[Mister-Hope]

I am going to close this issue since all the problems have been discussed.