图文字体的使用

1.从网上下载字体

图文字体的使用

2.在html页面中定义字体，并设置css样式引用字体

<html>
<head>
    <tile>sdfadfa</title>
    <style type="text/css">
@font-face {
    font-family: 'FontAwesome-v5';
    src:
        url('fontawesome-webfont.eot');
    src: url('fontawesome-webfont.eot')
        format('embedded-opentype'),
        url('fontawesome-webfont.woff2')
        format('woff2'),
        url('fontawesome-webfont.woff')
        format('woff'),
        url('fontawesome-webfont.ttf')
        format('truetype'),
        url('fontawesome-webfont.svg')
        format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon {font-family:'FontAwesome-v5' ;}

.fa-hands-helping:before {
    content: "\f4c4" !important;   //编码
}
</style>

</head>
<ul>
<li><div title="帮助" class="icon fa-hands-helping"></div></li>
</ul>

content: "\f4c4" !important; //编码这个是文字图片的编码，如下

图文字体的使用

运行html 页面上的文字就显示出来了

图文字体的使用