<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

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

 </head>

 <body>

     <h2 style="color: red;">注意：上下两列内容是一样的</h2>

     <p class="icon">

         <span style="color: red;">x</span>

     </p>

     <p>

         <i class="icon"></i>

         <span style="color: red;">x</span>

     </p>

 </body>

 </html>

页面效果显示如下：

问题用法

 <p class="icon">

    <span style="color: red;">x</span>

 </p>

改后用法

 <p>

    <i class="icon"></i>

    <span style="color: red;">x</span>

 </p>

也就是说，iconfont元素里边避免在使用文案，所有图标使用最小元素去处理

结论：

使用iconfont元素的内部，避免使用文案。规范iconfont用法~

icon踩坑记录的更多相关文章

  1. Unity AssetBundle 踩坑记录

    Unity AssetBundle 踩坑记录 editor 下选择什么平台的 ab 加载 Material doesn't have a color property '_Color' UnityEd ...

  2. unionId突然不能获取的踩坑记录

    昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...

  3. CentOS7.4安装MySQL踩坑记录

    CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...

  4. ubuntu 下安装docker 踩坑记录

    ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...

  5. SpringBoot + Shiro + shiro.ini 的踩坑记录

    0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...

  6. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  7. google nmt 实验踩坑记录

       最近因为要做一个title压缩的任务,所以调研了一些text summary的方法.    text summary 一般分为抽取式和生成式两种.前者一般是从原始的文本中抽取出重要的word o ...

  8. ABP框架踩坑记录

    ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...

  9. SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录

    Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...

随机推荐

  1. ShardingJDBC(一)-转载

    Sharding-JDBC:垂直拆分怎么做? 原创: 尹吉欢 猿天地 今天 经过读写分离的优化后,小王可算是轻松了一段时间,读写分离具体的方案请查看这篇文章:Sharding-JDBC:查询量大如何优 ...

  2. easyui-dialog对话框练习

    <div id="dl1" class="easyui-dialog" title="窗口" style="width:40 ...

  3. 自动化测试资源（一)：谷歌浏览器驱动 ChromeDriver

    ChromeDriver(官网):https://sites.google.com/a/chromium.org/chromedriver/ (需要XX上网,官网里有驱动和浏览器的版本映射关系) (如 ...

  4. 【转】《Unity Shader入门精要》冯乐乐著 书中彩图

    为方便个人手机学习时候查阅,从网上转来这些彩图. 如属过当行为,联系本人删除. 勘错表 http://candycat1992.github.io/unity_shaders_book/unity_s ...

  5. ACdream 1216——Beautiful People——————【二维LIS，nlogn处理】

    Beautiful People Special Judge Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (J ...

  6. python中*args, **kwargs理解

    先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...

  7. android下的异步任务

    异步任务一般用在加载一些网络资源的时候用,主要的实现方法是新建一个类来继承AsyncTask这个父类,然后复写该类下面的一些方法,其中doInBackground方法是必须要的,下面看代码 packa ...

  8. Java虚拟机，类文件结构深度解析

    Java类文件结构 Java虚拟机不和包括Java在内的任何语言绑定,只与 "Class文件" 这种特定的二进制文件所关联, Class文件中包含了Java虚拟机指令集合符号表以及 ...

  9. java.sql.SQLException: Zero date value prohibited 报错分析

    今天在使用 iReview 复习词条时,发现 review 页面始终不会跳到下一个词条,应该是前台或者后台出现 BUG 了. 查看浏览器控制台,看到 500 报错,那应该是后台的问题. 登录后台,先查 ...

  10. Java面向对象的练习。动物乐园

    本次项目是:以面向对象的思想设计动物乐园系统. 动物乐园中有猫,狗,鸭子等成员,还可以增加新成员. 猫和鸭子都有自己的名字,都有自己的腿,但腿的条数不同,猫和鸭子会发出叫声,猫的叫声是:喵喵喵……,鸭 ...