HTML中引用iconfont图标

目录

一.unicode引用

二.font-class引用

1.打开iconfont官网找到所需图标

2.

3.

 4.

5.生成代码

一.unicode引用

1.拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

2.定义使用iconfont的样式

.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;}

3.挑选相应图标并获取字体编码，应用于页面

4.代码截图：

 5.效果图：

二.font-class引用

1.

 2.

 3.建立一个.css文件并把复制的内容粘贴进去

4.引用

 5.效果图：