黑马程序员技术交流社区

标题: 字体的图标的用法 [打印本页]
作者: 林德满    时间: 2019-7-24 14:20
标题: 字体的图标的用法
第一步 将下载的包进行解压 把里面fonts文件夹直接复制到自己的项目根目录下
第二步 打开解压的里面的demo.html 将我们需要的图标选中，并且复制，然后在我们自己的html页面新建一个标签把图标包裹 --  显示的样式一般是一个问号，或者什么都木有，在页面显示是一个灰框框；
第三步 声明文字将下面的代码直接复制到css最上面，使用下面代码的时候我们要注意：fonts文件的路径
     
        
@font-face    {
   
  font-family: 'icomoon';
   
  src:     url('../fonts/icomoon.eot?3a2xdr');
   
  src:     url('../fonts/icomoon.eot?3a2xdr#iefix')    format('embedded-opentype'),
   
    url('../fonts/icomoon.ttf?3a2xdr')    format('truetype'),
   
    url('../fonts/icomoon.woff?3a2xdr')    format('woff'),
   
       url('../fonts/icomoon.svg?3a2xdr#icomoon') format('svg');
   
  font-weight: normal;
   
  font-style: normal;
   
}
   
   

第四步  在css里面给调用这个文字的盒子设置样式font-family: 'icomoon';





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2