CSS常用技巧

字体图标iconfont的使用

1.为什么要使用字体图标

网页中的小图标经常会用字体图标（本质是文字）
例如：

精灵图虽然有很多优点，但也有缺点

使用的图片文件太大
图片放大缩小可能会失真
想换其中一个图片，需把所有图片重新设置，更换困难

2.字体图标的优点

占的内存小，网页渲染快，减少了服务器压力
可以随意的设置大小样式等
兼容性高，几乎支持所有浏览器

3.字体图标下载网站： www.iconfont.cn

先打开购物车，选择添加到项目

选择Unicode，下载到本地

3.字体图标的使用

现在就可以使用啦！将这个文件夹传到你的html文件夹的根目录，并解压修改文件夹名字为fonts

再打开fonts中的demo_index文件

3. 字体图标引入方法

4.实现代码和效果图

    <style>
        /* 字体图标声明 */
        @font-face {
            font-family: 'iconfont';
            src: url('fonts/iconfont.woff2?t=1648127932556') format('woff2'),
                url('fonts/iconfont.woff?t=1648127932556') format('woff'),
                url('fonts/iconfont.ttf?t=1648127932556') format('truetype');
        }  //url是下载字库文件的路径

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        } // 设置字库的样式
    </style>
    
     <body>
    <span class="iconfont">&#xe655;</span>
    <span class="iconfont">&#xe656;</span>
    </body>

效果图

5.链接引入字体图标（推荐使用）

1.在html中用link插入该链接，复制链接后要加入https：（实例是使用Font class，也是用得最多的）
2.再就可以调用字体图标了，注意：类名前面要加 iconfont
<span class="iconfont icon-my"></span>
3.Unicode和Symbol引用方式类似，就是链接不同

代码及效果图


<link rel="stylesheet" href="https://at.alicdn.com/t/font_3275465_l9lohvh6ao.css">
</head>
<body>
    <span class="iconfont icon-my"></span>
    <span class="iconfont icon-wodedingdan"></span>
    <span class="iconfont icon-wodefankui"></span>
    <span class="iconfont icon-wode"></span>
</body>

字体图标iconfont的使用