字体图标的两种方式

最新推荐文章于 2022-12-12 17:12:55 发布

跟影子说丨晚安

最新推荐文章于 2022-12-12 17:12:55 发布

阅读量186

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44177602/article/details/106790199

版权

第一种字体图标是跟文字紧贴着，鼠标移动到文字，字体图标也会变颜色

<head>
 <!-- 需要先在头部引入css链接 -->
<link rel="stylesheet" href="fonts/iconfont.css">
</head>
<body>
<li><a href="#">女装 <i class="iconfonr=t">&#xe747;</i></a></li>
</body>

效果图
第二种字体图标是跟文字不同时显示的，可以固定在一旁

<style>
<--注意地址填写正确	../返回父级目录		./返回本级目录-->
@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iconfont.woff2') format('woff2'),
    url('../fonts/iconfont.woff') format('woff'),
    url('../fonts/iconfont.ttf') format('truetype'),
    url('../fonts/iconfont.svg#iconfont') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
} 
li a::after{
  font-family: 'iconfont';<--声明-->
  content: "\e747";<--查找字体图标的对于数值-->
}
</style>
<body>
<li><a href="#">女装</a></li>
</body>