字体图标的使用

最新推荐文章于 2024-05-07 11:12:31 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-05-07 11:12:31 发布

阅读量130

点赞数

分类专栏： css日常总结文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_41880073/article/details/115006037

版权

css日常总结专栏收录该内容

25 篇文章 3 订阅

订阅专栏

字体图标的使用

一、介绍
二、我熟知的两个库
三、iconfont的使用
四、icomoon的使用

一、介绍

字体图标可以很好的解决我们的一些需求，有时候我们需要插入一些图标去丰富页面，如果插入ps做的图片图标，那么我们只能调整它的大小，改变不了颜色等其他属性。而字体图标就可以非常好的解决这一问题，你引入它之后可以对其做样式修改，颜色，大小等等。

二、我熟知的两个库

1、国内阿里的产品https://www.iconfont.cn/重点是免费哦，免费哦！
2、国外的https://icomoon.io/部分免费
个人用过之后，还是支持阿里的iconfont，因为访问它的速度快，重点是免费，哈哈哈。

三、iconfont的使用

1、首先你得登录网址，可以用你的git或者微博账号。
登录进去就是这样。
在这里插入图片描述
2、根据自己的需求，选择合适的图标加入购物车。我随便点了一些加入购物车

3、到购物车查看自己选的图标，在页面右上角

4、点击之后出现下面的页面，人后选择下载代码

5、下载好之后，解压之后，看到的文件夹是这样的
在这里插入图片描述
6、双击demo_index，在浏览器打开，看到自己图标的时候，也会看到官方的使用文档，接下来的操作，我就不详细说了，因为官方文档写的很清楚。一共3种方式，自己选择。

第一种方式

在这里插入图片描述
需要注意的是
@font-face和.iconfont在下图中的红框里面

第二种方式
在这里插入图片描述
需要注意的是，你得把生成的css文件放到你得项目目录里，然后再html引入，注意路径的填写。
第三种方式

需要注意的是，你得把生成的js文件放到你得项目目录里，然后在html引入，注意路径的填写。

四、icomoon的使用

1、进入官网的页面
在这里插入图片描述
2、点击右上角icomoon App

3、进入之后，按需选择

4、选择好之后下载

5、下载好之后，解压后的文件夹

6、将fonts文件夹放到你的项目目录中，最好放到根目录下，因为引用的时候不用修改路径

7、在你的css样式里引入生成的@font-face，这个样式在下图这个css文件中，你打开就可以看到，注意路径保持一致。

在这里插入图片描述

8、然后可以双击demo

9、进去之后，可以看到图标

10、在你html页面引入图标的编号
注意，复制的是下图中红框圈出来的位置

11、可以在css中对引入的图标进行样式修改
来一个完整实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@font-face {
				font-family: 'icomoon';
				src: url('fonts/icomoon.eot?rn66aq');
				src: url('fonts/icomoon.eot?rn66aq#iefix') format('embedded-opentype'),
					url('fonts/icomoon.ttf?rn66aq') format('truetype'),
					url('fonts/icomoon.woff?rn66aq') format('woff'),
					url('fonts/icomoon.svg?rn66aq#icomoon') format('svg');
				font-weight: normal;
				font-style: normal;
				font-display: block;
			}
			span {
				font-family: 'icomoon';
				font-size: 100px;
				color: red;
			}
		</style>
	</head>
	<body>
		<span></span>
	</body>
</html>

在这里插入图片描述
分享到此结束，加油吧！IT人

丑小鸭变黑天鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体图标的使用

字体图标的使用一、介绍二、我熟知的两个库三、iconfont的使用四、icomoon的使用一、介绍字体图标可以很好的解决我们的一些需求，有时候我们需要插入一些图标去丰富页面，如果插入ps做的图片图标，那么我们只能调整它的大小，改变不了颜色等其他属性。而字体图标就可以非常好的解决这一问题，你引入它之后可以对其做样式修改，颜色，大小等等。二、我熟知的两个库1、国内阿里的产品https://www.iconfont.cn/重点是免费哦，免费哦！2、国外的https://icomoon.io/部分免费
复制链接

扫一扫