css字体图标iconfont 使用方法

最新推荐文章于 2024-10-25 10:40:43 发布

原创最新推荐文章于 2024-10-25 10:40:43 发布 · 8.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #字体图标

HTML/CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

框架插件

14 篇文章

订阅专栏

本文档详细介绍了如何加载和使用图标字体文件，包括必要的样式文件及字体文件的存放位置，确保图标能在网页中正确显示的方法，以及如何引用特定图标字体的步骤。

/*Note：
    1: iconfont.css样式文件 和 "font"文件夹都放在公共文件夹内，具体路径各异;
    2: 需要用到字体图标的页面都须引用iconfont.css样式文件;
    3: 引用前检查iconfont.css内是否已定义该类名样式;
    4: 引用前检查font文件夹内是否包含对应的eot,woff,ttf,svg字体文件。
  By 刚哥(820262236@qq.com)
*/

.iconfont{
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    font-style:normal;
}

@font-face{
    font-family:'girl';
    src: url('../font/girl/iconfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/girl/iconfont.woff') format('woff'), 
    url('../font/girl/iconfont.ttf') format('truetype'), 
    url('../font/girl/iconfont.svg#iconfont') format('svg'); 
}
.iconfont.girl{font-family:"girl" !important;}
.iconfont.girl:before{content:'\e626';}