字体图标的引入和使用-svg是个好东西

最新推荐文章于 2024-05-13 01:02:10 发布

加鸡腿

最新推荐文章于 2024-05-13 01:02:10 发布

阅读量3.1k

点赞数

分类专栏： css 文章标签：字体图标的引入字体图标的使用 svg字体图标阿里巴巴图标

本文链接：https://blog.csdn.net/qq_43437571/article/details/100040140

版权

css 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

第一步，拥有svg格式的图片

途径一：ui给你
途径二：自己去阿里巴巴下载
网址：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
在这里插入图片描述

选好加入库

在这里插入图片描述

加入库之后：

在这里插入图片描述

下载下来的文件有：

在这里插入图片描述

新建一个文件夹，里面放这些文件：

在这里插入图片描述

第二步，字体图标的使用

①demo的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体图标的引入和使用-svg是个好东西</title>
    <link rel="stylesheet" href="css/test.css">
    <link rel="stylesheet" href="css/icon.css">
</head>
<body>
    <div class="main">
        <div class="wrapper">
            <div class="content">
                <button type="button" style="width:80px; color:#fff;">按钮展示：</button>
                <button type="button" class="">
                    <i class="iconfont icon-shanchu"></i>
                </button>
                <button type="button" class="">
                    <i class="iconfont icon-fenqitianjia"></i>
                </button>
                <button type="button" class="">
                    <i class="iconfont icon-chehui"></i>
                </button>
            </div>
        </div>
        <p style="width:500px; margin:0 auto; margin-bottom:10px;">表格展示：</p>
        <table>
            <tbody>
                <tr>
                    <th>删除</th>
                    <th>新增</th>
                    <th>还原</th>
                </tr>
                <tr>
                    <td><i class="iconfont icon-shanchu"></i></td>
                    <td><i class="iconfont icon-fenqitianjia"></i></td>
                    <td><i class="iconfont icon-huanyuan"></i></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

注意点：head里引入tset的css样式和icon的css样式

② icon的css表

@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1565918389247'); /* IE9 */
    src: url('iconfont.eot?t=1565918389247#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAU0AAsAAAAACrQAAAToAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqIRIZ5ATYCJAMYCw4ABCAFhG0HXBsTCSMRdntQYpP91QFviDf1d5jqNp54QGcV2oYCXtR41Rm1Det/5IiI9EWC+Rw8z+f9+2sfvTQpAOYWQAp5BmEGeCR+IcfW5OK7pP/NWxXxkBQq5HkVC3Wl7m1rHLExZ26vqRA/tXGiAgB0cBJeHP8FUrU454mMiFAjeYseSPZ9smbjLD39//eqZtq24LzZFqCnlrkWfUssGprHewo0xsZ/StaKY1WGk3CzMnPm+rchgE9OiiP1GzZvj4eBLhJAhg5K9MHzeTEJbMFzOMmdBlmBxVML1Q1gufn38omy4oHCauhdrcMG/an9Vr11Oopxdx0RVRcGrveBBooDBqS7NNoRbVeLo/HfUUPR5JMNAm9dHMNbpWs7+y8PBIXGYEEcZE0OavOahbdKVUDgrbYQthlYgM3CAmwOZlAEXIVnZIac0hfJ2Ua09NEkhGUIQXIJI45vZMOlEEULJ4SucHI8RYqmdFrkK6RZnPg1WVSgPRz2RgoREBG/bsrH81u2HJZWE9tk389mw28rZfn6hRQsvQ6UxJVII6U5A9MHdAWHKa4rPu5I4N1JQdXeN0mx4FPZ7y1hvcE6vR6M90LAjJzXnKP2ZB6+49UMCV6Iipid+0w/QIKUxFtjmpO2HpIQhg78+VsTxPKRPtQsiKMoQ3Hyl9gl+Odin4uoO/Mc6XHfwHDX/lv24vnL1YlamfehMSKlQArZZUpQ+FuuKr7Hj+ZKRfnyYXvPR4XbVz1dU0WXUpGTVHr8a69UtgZzK39IqyuObm8Y1Spc8XXwyxFMnc3Es16VF6lq3fslZ5XnXqmU/3dteG9AxnTtM/w+4NSqHYVntKf0vdq50y/K/Cb9gvQhO251lsWp3Jvmb1yqGwxfGqVfmrvRpCqL72RMVaVLr7YN/raZkoW1f60d2vKV9NC/7QR/vP3FjvczLRo65nzNBDvMJkzldocv2NBPcE2Sa2IvHGEvZblkEwNtWPt08/D6N20iKN8od7oqQycVLL00fbPlv7J+TuXarlLHaJh+6cQuvarW9wQGTD46efK3Qt8Kx5AY7WX8YrjjjP+o1WtuzFVHV+therh+9VwZUn5ToY2lh+zX7y7rtXoNGyWe8cTmzm2fCBXUmtEdSbH6zEXz998GposnNYynpVzPxhl5/VVOVMy/Kn8LCRPSXFqEYQs50bFTxxo3aw549LhTjU78igE1b9bo2KXr6cXq9Gm9WFxz+hT5AYhjjbXeF18t0VX+xh9jzhW9pFeq6r95gQHg6dQCx011NmI0GwEeCjLr/rQWUwkhNn4M5HPmhaXeEccI4FhOAP8GN74oQAwl0/KqKluGhrR63CODC4okcoDGIz/RUIuDJaA8ODxqgU8xGt0fkI7RaMQkA4oyl4GQmoOgSMlF0KTmJtFQX4IlI1/AkVo0+HSUdE8MKCi38GIjaBRf8PwB27oiJaALa/CIqS+MeA0m94rScQHiIAo2DlihVHFN904TVQKSuoQ9ex8WRQ2N1BlaDZxqsw5Dkv1QYOuyt2AjaBRf8PwB27oifbUuQr9/xNQXRhIw38pXlI4PD3EQZSAerFUmzK6Md+80UV4moGt/XcKeh7EQ1Roa+WkZWg1cgXKzDvkiymoNmreXa3kP8KEvO1GixYgVJ0lMxzhTWefH5P+OJ9aheySvCKuWlU2VqVIz50318/R6') format('woff2'),
    url('iconfont.woff?t=1565918389247') format('woff'),
    url('iconfont.ttf?t=1565918389247') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1565918389247#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    color:#fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-shanchu:before {
    content: "\e602";
  }
  
  .icon-fuzhi:before {
    content: "\e603";
  }
  
  .icon-chehui:before {
    content: "\e604";
  }
  
  .icon-fenqitianjia:before {
    content: "\e605";
  }
  
  .icon-huanyuan:before {
    content: "\e606";
  }

注意点：

font-family里面的src要写正确，根据自己这个字体文件放的位置来确定来源地址，写错就找不到图标了。
iconfont的类名，因为我需要白色边框的图标，所以我自己加了颜色。
icon-shanchu等等这一类的类名，直接引用就可以看到图标，但是要记住如果想要图标显示，需要同时引入 .iconfont类名和你需要的删除或者复制或者其他的类名

③ demo的css样式表


/* 页面布局 */
.main {
    padding: 30px 100px;
    width: 960px;
    margin: 0 auto;
  }

  .icon {
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 42px;
    margin: 10px auto;
    color: #333;
  }
/* 按钮部分 */
  .wrapper {
      height: 50px;
  }
  .content {
      float: right;
  }
  button {
    width: 30px;
    height: 30px;
    border:none;
    border-radius: 4px;
    background-color: #335e9a;
  }

  button:last-child {
      margin-right: 30px;
  }

  button:hover {
      background-color: #3990c9;
  }
/* 表格部分 */
  table {
    width: 500px;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    border:1px solid #d4d4d4;
    background-color: #3990c9;
    border-collapse: collapse;
  }

  table th, table td {
    border: 1px solid #d4d4d4;
  }

效果如下：

在这里插入图片描述

加鸡腿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
字体图标的引入和使用-svg是个好东西

第一步，拥有svg格式的图片途径一：ui给你途径二：自己去阿里巴巴下载网址：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2下载下来的文件有：新建一个文件夹，里面放这些文件：第二步，效果展示①demo的html页面<!DOCTYPE html><html lang="en"...
复制链接

扫一扫