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

第一步，拥有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><pstyle="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;}

效果如下：

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

从零开始学前端：字体图标的引入 --- 今天你学习了吗？（CSS：Day18）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:定位 - 今天你学习了吗?(CSS:Day17) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
HTML 字体图标的引入
字体图标:简单的说就是1种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样.可以通过css样式改变文字和颜色,使用非常方便. 字体图标引入中,我经常使用 iconfont-阿里巴巴矢量图标库 ...
字体图标的引入方式(阿里巴巴字体库的使用)
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具http ...
icomoon字体图标的引入
1.在网站(http://icomoon.io)中下载字体进入官网点击进入后即可选择字体(直接点击选择),加载得稍微有点慢,耐心等待. 若没有想要的,可直接下拉到网页最后点击在library ...
uniapp引入字体图标库
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹,将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标二.字体图标的好处三.字体图标用法四.字体图标格式介绍一.什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用 ...

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

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

第二步，字体图标的使用

效果如下：

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

最新文章

热门文章