字体图标的使用

最新推荐文章于 2022-10-05 09:08:29 发布

斗弟

最新推荐文章于 2022-10-05 09:08:29 发布

阅读量310

点赞数

分类专栏： CSS3 文章标签：字体图标的使用

本文链接：https://blog.youkuaiyun.com/L_Lintellect/article/details/100022098

版权

CSS3 专栏收录该内容

3 篇文章

订阅专栏

字体图标

第一步：定义字体图标，并导入字体文件

先把字体文件拷贝到项目文件夹，并在样式代码中添加以下代码

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

其中.eot、.svg .woff .ttf 是多字体文件，为了给各种浏览器兼容，使用时修改路径即可。

第二步：写字体的样式

  .iconfont{font-family: "icon";}   icon 为第一步的自定义的名称

这个就是和谐平常的样式一样，font-size，color，还有其他属性的等，按需写好。

第三步：使用

有三可以使用到字体图标的方法

$C:\Users\LH\AppData\Roaming\Typora\typora-user-images$

第一种通过字体编码方式

 <span class="iconfont">&#xec0b;</span>

在需要显示字体图片的元素上加上iconfont类名和写好字体编码即可。

第二种：用伪类选择器在样式中实现，此时只用编码只用写 ·/+后四位即可

.saoyisao::before{
      content:"\e631" ;
   }

<span class="iconfont saoyisao"></span> //通过给一个类名，让其生成一个伪类元素的方式使用字体图标

第三种直接调用别人写好的样式，写入对应的类名就可以实现。

<link rel="stylesheet" href="../icon/iconfont.css">

此中方法的本质是将这3步都写好封装在css文件中了，找到对应的类名调用就可。并且声明的你的字体类型（第二步的font-familly，可以选择下图的封装好的样式iconfont ,或者把font-familly:"iconfont"放进你的样式中。

使用示例：假如我需要在span中生成一个字体图标。
方法一：都用封装好的css，前提是字体文件已经复制到项目文件夹，并且改好路径和link css进html中。

<span class="iocnfont icon-zhifubao">支付宝</span> 这样子就可以显示图标了。

方法二：当不想用别人的样式的时候。

<span class="span1 icon-zhifubao">支付宝</span> span1是你自取的样式名（class或id名都可以），只要在span1中代码:font-familly:"iconfont"即可。

下图为一个封装好的图片css，使用时是需要改变其路径。在这里插入图片描述

https://www.iconfont.cn 网上的字体图标，都是免费的。