font-face字体图标和inconfont矢量图标库

最新推荐文章于 2024-04-21 12:18:11 发布

九阈

最新推荐文章于 2024-04-21 12:18:11 发布

阅读量924

点赞数

分类专栏： # CSS 文章标签：前端 css3 javascript

本文链接：https://blog.csdn.net/weixin_46048542/article/details/125131194

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

font-face字体图标

font-face是css3中的一个模块，他主要是把自己定义的web字体嵌入到你的网页中。
好处:
1.可以非常方便的改变大小和颜色
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端I程师的工作量
6.可使用计算机没有提供的字体
请添加图片描述

inconfont矢量图标库

inconfont矢量图标库 https://www.iconfont.cn
请添加图片描述
下载到本地解压
这个告诉如何使用

可以拖到浏览器中打开或者双击点开

将上面解压到的拷贝到自己需要的位置
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./images/iconfont.css">
</head>
<body>
    <span class="iconfont icon-quan"></span>
</body>
</html>

运行结果
请添加图片描述
彩色图标引入

跟上面一样

打开选择symbol

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./images/iconfont.js"></script>
    <style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
    </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-pingguo"></use>
      </svg>
</body>
</html>

运行结果
请添加图片描述

自定义字体图标

在线生成字体图标https://icomoon.io/app
请添加图片描述

首先准备好自己的图形

然后选择download下载
然后跟上面一样

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
font-face字体图标和inconfont矢量图标库

font-face是css3中的一个模块，他主要是把自己定义的web字体嵌入到你的网页中。好处:1.可以非常方便的改变大小和颜色2.放大后不会失真3.减少请求次数和提高加载速度4.简化网页布局5.减少设计师和前端I程师的工作量6.可使用计算机没有提供的字体inconfont矢量图标库 https://www.iconfont.cn下载到本地解压这个告诉如何使用可以拖到浏览器中打开或者双击点开将上面解压到的拷贝到自己需要的位置运行结果彩色图标引入跟上面一样打开选择
复制链接

扫一扫