阿里iconfont的网站 ：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
1.iconfont的hover变色
css：
.icongithubalt:before {
content: "\eaf7";
font-size: 50px;
cursor: pointer;
display: block;
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
}
.icongithubalt:hover::before{
color: rgb(108, 227, 231);
}
2.iconfont的hover缩小
css：
.iconeye:before {
content: "\e6e1";
display: block;
width: 100px;
height: 100px;
cursor: pointer;
text-align: center;
line-height: 100px;
font-size: 50px;
transition: all 0.6s;
}
.iconeye:hover::before{
transform: scale(0.4);
}
完整代码
<!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>
</head>
<style>
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/font_2464532_4pqvp9rgzcd.eot?t=1619350170165'); /* IE9 */
src: url('//at.alicdn.com/t/font_2464532_4pqvp9rgzcd.eot?t=1619350170165#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('//at.alicdn.com/t/font_2464532_4pqvp9rgzcd.woff?t=1619350170165') format('woff'),
url('//at.alicdn.com/t/font_2464532_4pqvp9rgzcd.ttf?t=1619350170165') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_2464532_4pqvp9rgzcd.svg?t=1619350170165#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icongithubalt:before {
content: "\eaf7";
font-size: 50px;
cursor: pointer;
display: block;
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
}
.iconeye:before {
content: "\e6e1";
display: block;
width: 100px;
height: 100px;
cursor: pointer;
text-align: center;
line-height: 100px;
font-size: 50px;
transition: all 0.6s;
}
.icongithubalt:hover::before{
color: rgb(108, 227, 231);
}
.iconeye:hover::before{
transform: scale(0.4);
}
div{
width: 100px;
height: 100px;
border: rgba(56, 56, 56,0.8) solid;
}
</style>
<body>
<div>
<i class="iconfont icongithubalt"></i>
</div>
<div>
<i class="iconfont iconeye"></i>
</div>
</body>
</html>