CSS3：图标字体

最新推荐文章于 2023-04-25 17:45:46 发布

落花新月

最新推荐文章于 2023-04-25 17:45:46 发布

阅读量1.1k

点赞数 1

分类专栏： Web前端文章标签：字体图标图标字体图标字体

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50933245

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.图标字体：就是用字体代替图片

1）如：淘宝https://www.taobao.com/

（1）默认：（font-size:12px;）

（2）审查代码，看到font-size默认为12px

（3）用滚轮调整字体大小后，会有以下结果：

2）而新浪网：http://www.sina.com.cn/ 的图标就不是用这种方式解决的，而是用图片：

（1）打开url的链接，会看到左上角有这个图片：

（2）当切换到这个页面：http://sports.sina.com.cn/csl/ 的时候，会发现有一个一模一样，但是要大一些的图标：

（3）审查元素：

（4）链接图片：

所以这样就要用两次就要做两张图片，很不方便的。

2.图标字体的好处：

1）可以通过font-size调整图标的大小

2）颜色可以自由修改。

3）可以添加阴影

4）IE6也支持

图标字体的使用方法：

1）下载字体，可以通过以下网站：

国外：https://icomoon.io/

国内（阿里巴巴的）：http://iconfont.cn/

进入https://icomoon.io/站点——》IcoMoon App——》点击想要的图标——》generate font——》download——》解压下载好的内容，找到fonts文件夹——>复制fonts文件夹到项目底下

2）声明字体：

根据自己使用的具体情况可以做以下调整：（url里面放的是字体的路径）

  @font-face {
            font-family: 'testIcon';        /*该字体的名称是随便写的*/
            src: url('fonts/icomoon.eot');
            src: url('fonts/icomoon.eot?#iefix')format('embedded-opentype'),      /*IE6-IE8*/
            url('fonts/icomoon.woff')format('woff'),      /*chrom firefox*/
            url('fonts/icomoon.ttf')format('truetype'),   /*chrom、firefox、opera、Safari、Android、IOS4.2+*/
            url('fonts/icomoon.svg#uxiconfont')format('svg');    /*IOS4.1-*/
        }

3）引用字体：

在1）中字体download的页面复制图标下面右侧的内容（内容有可能是透明的看不见）到页面代码中，如下：

在样式文件中设置字体的font-family为自己在声明中给定的那个字体。

具体代码示例如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图片测试</title>
    <style type="text/css">
        @font-face {
            font-family: 'testIcon';        /*该字体的名称是随便写的*/
            src: url('fonts/icomoon.eot');
            src: url('fonts/icomoon.eot?#iefix')format('embedded-opentype'),      /*IE6-IE8*/
            url('fonts/icomoon.woff')format('woff'),      /*chrom firefox*/
            url('fonts/icomoon.ttf')format('truetype'),   /*chrom、firefox、opera、Safari、Android、IOS4.2+*/
            url('fonts/icomoon.svg#uxiconfont')format('svg');    /*IOS4.1-*/
        }
        div{
            font-family: testIcon;         /*font-family的名称为自己给定的那个*/
            margin-bottom: 10px;
       
        }
    </style>
</head>
<body>
  <div></div>      <!--粘贴进来就看到内容了-->
  <div></div>
  <div></div>
</body>
</html>

运行效果：

如果想要调整大小和颜色，则修改如下：

运行效果：

落花新月

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3：图标字体

1.图标字体：就是用字体代替图片1）如：淘宝https://www.taobao.com/（1）默认：（font-size:12px;）（2）审查代码，看到font-size默认为12px（3）用滚轮调整字体大小后，会有以下结果：2）而新浪网：http://www.sina.com.cn/ 的图标就不是用这种方式解决的，而是用图片：
复制链接

扫一扫

专栏目录