字体图标的使用

最新推荐文章于 2022-04-25 14:27:42 发布

Maple...Leaf

最新推荐文章于 2022-04-25 14:27:42 发布

阅读量186

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45741441/article/details/104987907

版权

字体图标的使用

字体图标的下载

下载字体图标：Icon Font字体图标
下载图标的步骤：
1.
第一步
2.
第二步
3.

第三步

字体图标的的使用

下载后的字体图标解压缩，找到下面两个文件

在这里插入图片描述
将这两个文件添加到需要使用的项目工程中
将字体引入到HTML中
1.在样式中声明字体（在css中添加），代码如下

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

2.在内容中使用字体（在css中添加）

span {
  font-family: "icomoon";
 }

3.给字体添加结构

span::before {/*此处需要在css中书写*/
   content: "\e900";/*\e900为字体图标的编号*/
 }
或者  
<span></span>  /*此处在body中书写 其中空白部分是对字体图标进行的复制粘贴，下面详细介绍*/

打开下载文件中的index.html文件
在这里插入图片描述

在这里插入图片描述

应用实例


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?7kkyc2');
      src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
   }
   span {
    font-family: "icomoon";
   }
  </style>
 </head>
 <body>
  <span></span>  /*引入字体图标*/
 </body>
</html>

结果如图：
在这里插入图片描述

Maple...Leaf

关注

0
点赞
踩
0

收藏

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

字体图标的使用字体图标的下载字体图标的的使用应用实例字体图标的下载下载字体图标：Icon Font字体图标下载图标的步骤：1.2.3.字体图标的的使用下载后的字体图标解压缩，找到下面两个文件将这两个文件添加到需要使用的项目工程中将字体引入到HTML中1.在样式中声明字体（在css中添加），代码如下@font-face { font-family: 'icomoo...
复制链接

扫一扫