JSFiddle - React, Tailwind, and code Playground

by liewshirley

HTML

<script src="http://demo.cssworld.cn/images/5/delete.png"></script>
<div class="box">
  <h4>1.空标签后面跟随文本</h4>
  <p><i class="icon icon-delete"></i>删除</p>
  <h4>2.标签里面有“删除”文本</h4>
  <p><i class="icon icon-delete">删除</i>随便什么文字</p>
  <h4>3.字号变大</h4>
  <p class="large">
    <i class="icon icon-delete"></i>删除
  </p>
  <p class="large">
    <i class="icon icon-delete">删除</i>随便什么文字
  </p>
</div>

CSS

.box {
  line-height: 20px;
}
.icon {
  display: inline-block;
  width: 20px; height: 20px;
  white-space: nowrap;
  letter-spacing: -1em;
  text-indent: -999em;
}
.icon:before {
  content: '\3000';
}
.icon-delete {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAFVBMVEUAAABUWmxUWmxUWmxUWmxUWmxUWmw8H2eOAAAABnRSTlMAj/3LOzynOwS2AAAAOklEQVQI12MAArFEBjBgTEsTADPYUsISgJRZGhgkIxhsIGEgCURpQEQ+IwVkjlsC0EogAFsrBqITGQB2MhzB6n7HpwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-position: center center;
}
.large {
  font-size: 20px;
}