当前位置：网站首页>图标字体

图标字体

2022-07-27 12:48:00 【不好意思，此人不存在】

图标字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/font/css/all.css">
    <style> li{
      list-style: none; } li::before{
      /* 通过伪元素来设置图标字体 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab font-family：'Font Awesome 5 Brands'; fas font-family:'Font Awesome 5 Free'; font-weight:900; */ content: '\f1b0'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: blue; margin-right: 10px; } </style>
</head>
<body>
    <!-- 图标字体（iconfont） -在网页中经常需要使用一些图标，可以通过图片来引入图标 但是图片大小本身比较大，并且非常的不灵活 -所以在使用图标时，我们还可以将图标直接设置为字体， 然后呢后通过font-face的形式来对字体进行引入 -这样我们就可以通过字体的形式来使用图标 font awesome使用步骤 1.下载 英文官网下载 2.解压 3.将css和webfonts移动到项目中 4.将all.css引入到网页中 5.使用图标字体 -直接通过类名来使用图标字体 class="fas fa-bell" class="fab fa-accessible-icon" -->
     <!-- <i class="fas fa-bell"></i> -->
     <ul>
         <li>
             锄禾日当午
         </li>
     <li>...</li>
     </ul>
     <!-- 通过实体来使用图标字体： &#x图标的编码； -->
      <span class="fas">&#xf0f3;</span>
</body>
</html>
原网站

版权声明
本文为[不好意思，此人不存在]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_44278908/article/details/114081868

边栏推荐

猜你喜欢

随机推荐