【前端】小图标不显示

最新推荐文章于 2026-02-21 10:39:44 发布

原创最新推荐文章于 2026-02-21 10:39:44 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

46 篇文章 0 人学习

订阅专栏查看详情

CSS

当前文章被收录于：

CSS

12 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种常见CSS问题的解决办法，即如何正确加载并使用FontAwesome图标字体。通过正确的@font-face定义及字体文件路径配置，可以确保网页上的图标正常显示。

问题描述：

css:

.nav > .uk-inline > button:after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: 14px;
    line-height: 14px;
    vertical-align: 0;
    padding-left: 3px;
}

原因：没有引用FontAwesome

引用：

@font-face {
	font-family: 'Conv_georgiab';
	src: url('../fonts/georgiab.eot');
	src: local('☺'), url('../fonts/georgiab.woff') format('woff'), url('../fonts/georgiab.ttf') format('truetype'), url('../fonts/georgiab.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot1');
  src: url('../fonts/fontawesome-webfont.eot?') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

别忘记在相应的位置放入fonts文件

结果: