esappear / hexo-theme-clover

Clover theme for Hexo.
214 stars 44 forks source link

请教下怎么更换 iconfont ? #2

Closed cyp7211 closed 4 years ago

cyp7211 commented 5 years ago

你好,很开心使用了这个主题。 但是我有一个小小的问题想请教一下,请问怎么更换自己添加的图标呢?

我从阿里 iconfont 新建了项目并生成了代码

@font-face { font-family: 'iconfont'; / project id 882526 / src: url('//at.alicdn.com/t/font_882526_q8lf8aphqxd.eot'); src: url('//at.alicdn.com/t/font_882526_q8lf8aphqxd.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_882526_q8lf8aphqxd.woff') format('woff'), url('//at.alicdn.com/t/font_882526_q8lf8aphqxd.ttf') format('truetype'), url('//at.alicdn.com/t/font_882526_q8lf8aphqxd.svg#iconfont') format('svg'); }

并且更改了fonts.scss 中的设置

.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; &.icon-behance::before { content: '\e919'; } &.icon-lofter::before { content: '\e63c'; } &.icon-instagram::before { content: '\e626'; } &.icon-dribbble::before { content: '\e6c3'; } &.icon-weibo::before { content: '\e69e'; } &.icon-weixin::before { content: '\e694'; } &.icon-zhihu::before { content: '\e69a'; } &.icon-pinterest::before { content: '\e697'; } &.icon-huaban::before { content: '\e63c'; } &.icon-github::before { content: '\e799'; } &.icon-arrow-left::before { content: '\e91a'; } &.icon-arrow-right::before { content: '\e636'; } } 但是我的更改并没有成功,请问还需要设置什么地方吗?

小白上路,还请多多指教:joy:

esappear commented 5 years ago

@cyp7211 感谢你的使用和提问。 如果你只是想替换图标的话,你直接替换我在fonts.scss的iconfont就可以的。 image 如果没生效的话,可能是缓存,重启一次服务就好。

如果你需要新增图标的话,在_config.yml中添加。 比如,你想添加知乎的链接,可以这样:

# Social media
social:
  Zhihu: http://www.zhihu.com

然后保证你的fonts.scss里有icon-zhihu即可。

cyp7211 commented 5 years ago

@cyp7211 感谢你的使用和提问。 如果你只是想替换图标的话,你直接替换我在fonts.scss的iconfont就可以的。 image 如果没生效的话,可能是缓存,重启一次服务就好。

如果你需要新增图标的话,在_config.yml中添加。 比如,你想添加知乎的链接,可以这样:

# Social media
social:
  Zhihu: http://www.zhihu.com

然后保证你的fonts.scss里有icon-zhihu即可。

非常感谢您的回复~已经更换成功了,原来需要等待一段时间才行。 不过还是有点问题想要请教一下,图标在 Chrome 和 Edge 的显示不同步,Chrome 图标有所缺少。 https://www.superbed.cn/pic/5bd01f219dc6d6323b0ae759 请问这是啥子问题呀? 😂

esappear commented 5 years ago

应该是缓存,你清掉缓存重新刷新就好。