Icomoon插入图标方法②

下载图标方法见方法①
新建代码文件，在css里加入以下代码

/*依然注意路径问题*/
@font-face{font-family:"imooc-icon";src:url("fonts/icomoon.eot"); /* IE9 兼容模式 */src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),url("fonts/icomoon.woff") format("woff"),url("fonts/icomoon.ttf") format("truetype"),url("fonts/icomoon.svg") format("svg");font-weight:normal;font-style:normal;}p{font-family:'imooc-icon' !important;}/*在什么标签里插入图标，就要声明一下font-family；font-family和@font-face里的一样上面用p做例子!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}
在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。*/

点开下载包

看图标的代码

代码的使用，在前面加&#x

<p>&#xe900;</p>

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">@font-face{font-family:"imooc-icon";src:url("fonts/icomoon.eot"); /* IE9 兼容模式 */src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),url("fonts/icomoon.woff") format("woff"),url("fonts/icomoon.ttf") format("truetype"),url("fonts/icomoon.svg") format("svg");font-weight:normal;font-style:normal;}p{font-family:'imooc-icon' !important;}</style>
</head>
<body><p>&#xe900;</p>
</body>
</html>

文件

效果

Icomoon插入图标方法②相关推荐

字体图标库-icomoon的使用方法
1.进入官网 icomoon官网地址:https://icomoon.io/ 2.进入官网后, ① 点击IcoMoon App ② 选择自己要的图标. ③ 会显示在Selection()里面. ④ 点 ...
在ListCtrl控件中插入图标
在ListCttrl控件(Report风格)的使用上,有时需要向子列中插入图标,例如要制作一个下载软件,我们计划在控件的第一列用图标的形式显示下载状态:排队.下载中.出错等等,第二列计划用图标显示下载 ...
axure弹窗关闭_干货来袭，Axure插入图标的几种办法
前言在日常绘制原型的时候,经常会需要插入相应的图标(icon)到Axure中,但是看似好像很简单的事情也给蛮多小伙伴造成了困扰. 现在很多开发团队都会用一些比较常见的前端框架来搭建后台管理系统,例如 ...
java进阶线程池 join用法总结：thread4.join();方法，就表明thread4.join();这个线程受到贵客待遇，直到这个线程执行完，被插入这个方法的载体线程才可以执行。
那个线程调用join 举例 thread4.join();方法,就表明thread4.join();这个线程受到贵客待遇,直到这个线程执行完,被插入这个方法的载体线程才可以执行. package ja ...
如何使用IcoMoon字体图标
如何使用IcoMoon字体图标一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...
html文档图标恢复,恢复HTM HTML图标方法
恢复HTM-HTML图标方法恢复HTM_HTML图标自从上次我卸载了firefox浏览器以后,我的电脑XP系统的HTM.HTML图标不知什么时候被改掉了,变成了一个windows的未知图标,我按照 ...
MySql避免重复插入记录方法(ignore,Replace,ON DUPLICATE KEY UPDATE)
本文章来给大家提供三种在mysql中避免重复插入记录方法,主要是讲到了ignore,Replace,ON DUPLICATE KEY UPDATE三种方法,各位同学可尝试参考. 案一:使用ignore ...
链接列表插入删除方法
链接列表插入方法 (Linked List Insert Methods) Linked List Insert 链表插入 Linked List insert methods allow us to ...
使用Typora编辑器编写md文档插入图片方法
使用Typora编辑器编写md文档插入图片方法截图粘贴到文档中: 图片右键,选择"复制图片到"将图片复制到md文档相对路径: 将图片路径修改为相对路径,并替换斜杆为"/ ...

Icomoon插入图标方法②

Icomoon插入图标方法②

Icomoon插入图标方法②相关推荐

最新文章

热门文章