兼容ie8的纯css图标制作

css3确实是个好东西，可以用纯css3制作许多好看的图标

可是国内还有好多ie8的用户，要知道ie9对css3都支持的不怎么样，ie8几乎不支持。。。

so 特发此文，讲解如何制作兼容ie8的纯css图标，点击下面教学链接，有详细的解释：

兼容ie8的css图标--手把手动画教学

进入后点下一步就好了

顺便献上该图标的纯svg版本，还有动画效果哦～～，自己手动建立html，复制下列代码到body里面：

  <svg width='200' height='200' style="font-size:40px;border:0.15em dashed #fff;border-radius: 0.5em;background-color: #222222;">
    <path d="M20 60L100 140L180 60Z" fill="#FF0033">
      <animate attributeName='fill' attributeType="auto" begin="0s" dur="2.3s" from="#222222" to="#222222"/>
      <animate attributeName='fill' attributeType="auto" begin="2.3s" dur='0.3s' from="#222222" to="#FF0033"></animate>
    </path>
    <path d="M20 140L60 100L140 100L180 140Z" fill="#FF0033">
      <animate attributeName='fill' attributeType="auto" begin="0s" dur='0.3s' from="#222222" to="#FF0033"></animate>
      <animateMotion path="M0 0L0 -80" begin="1.3s" dur="1s" fill="freeze"/>
    </path>
    <path d="M20 140L20 20L180 20L180 140L140 100L140 60L60 60L60 100Z" fill="#222222">
      <animate attributeName='fill' attributeType="auto" begin="0s" dur='0.3s' from="#222222" to="#FF0033"></animate>
      <animate attributeName='fill' attributeType="auto" begin="0.3s" dur='1s' from="#FF0033" to="#222222"></animate>
      <animateMotion path="M0 0L0 -80" begin="1.3s" dur="1s" fill="freeze"/>
    </path>
    <text style="font: 800 300% Georgia, serif;" x='68' y='105' fill='#FFCC00'>
      S
      <animate attributeName='opacity' attributeType="CSS" begin="0s" dur="2.6s" from="0" to="0"/>
    </text>
  </svg>

csdn的博客限制还真是多。。。我把上面的svg嵌在页面上想直接让它显示的。。可是svg直接被过滤掉了。。。之前嵌入js脚本也被过滤掉了，真蛋疼，只好把各种资料做成外部链接或是直接展示源码了。。。。一点都不直观。。。