search

vuepress-theme-hope / vuepress-theme-hope

A vuepress theme with tons of features✨
https://theme-hope.vuejs.press
MIT License
2.13k stars 745 forks source link

[Note] Attention when using fontawesome #375

Closed titieo closed 3 years ago

titieo commented 4 years ago

For those who use fontawesome, please add these lines to your index.styl:

.iconfont
  &.fa, &.fas
    font-weight 900
titieo commented 4 years ago

Hi there, after a few days I realise that there is still another bug (I'm still using FontAwesome) As you see in the picture below, the icon next to Account rendered different from the original. Other icon next to Cat, Tags, Timeline have the same issue. They look transparency. I've taken a look and finally realise that sth change from the solid style into regular style (change solid into transparency and add border). Because the fas fa-tag, fas fa-th-large, fas fa-history are 100% solid so they become completely transparency. Would you mind have a look at this? Thanks

image

image

Mister-Hope commented 4 years ago

Got it, font-weight: 400 is inflecting the apprence:

image image

titieo commented 4 years ago

Well, there is a document about font-weight: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Mister-Hope commented 4 years ago

Well, there is a document about font-weight: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

The problem is that while fontawesome is changing font-weight in different types, iconfont is not setting it's font-weight. But iconfont icons do need a normal(400) font weight to make the icon appearance right. Tags like h1 and other classes in theme have different font-weight, which will affect the icon appearance, that's why I set a default font-weight: 400( the same as font-weight: normal) to the icon in order to ensure the icons have the correct appearance.

I am hoping that the icon class user added have a higher priority. But I forgot users are adding a css link to the final css which will make the classes have a lower priority, which is not what I am expected.

I didnot catch up with a better solution.

Either I remove that style and let all the iconfont users to add that style in their index.styl, or I remain the style and let all the fontawesome users to add the style I list above. It's kind of document thing.

Since more users are using iconfont, I am going to remain the style, and metion users to add extra style when using fontawesome in docs.

If you have any ideas improving the situation, welcome to reply.

Mister-Hope commented 3 years ago

Font awesome is supported in 1.7.0.

See https://vuepress-theme.mrhope.site/guide/feature/icon/