Prometheus

# icon

iconfont矢量图标

# 1. DOM 结构

  • iconfont：图标

# 2. 样式

arrowRight
arrowUnder
arrowOn
closePop
navBack
selectDownRadio
navSearch
selectUp
warning
success
failure
wait
prompt
delete
add
less
notice
phone
refresh
close
slide
hot
<q-demo>
  <div class="icon-list">
    <div class="icon-item">
      <i class="iconfont icon-arrowRight"></i>
      <div class="icon-item__text">arrowRight</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-arrowUnder"></i>
      <div class="icon-item__text">arrowUnder</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-arrowOn"></i>
      <div class="icon-item__text">arrowOn</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-closePop"></i>
      <div class="icon-item__text">closePop</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-navBack"></i>
      <div class="icon-item__text">navBack</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-selectDownRadio"></i>
      <div class="icon-item__text">selectDownRadio</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-navSearch"></i>
      <div class="icon-item__text">navSearch</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-selectUp"></i>
      <div class="icon-item__text">selectUp</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-warning"></i>
      <div class="icon-item__text">warning</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-success"></i>
      <div class="icon-item__text">success</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-failure"></i>
      <div class="icon-item__text">failure</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-wait"></i>
      <div class="icon-item__text">wait</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-prompt"></i>
      <div class="icon-item__text">prompt</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-delete"></i>
      <div class="icon-item__text">delete</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-add"></i>
      <div class="icon-item__text">add</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-less"></i>
      <div class="icon-item__text">less</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-notice"></i>
      <div class="icon-item__text">notice</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-phone"></i>
      <div class="icon-item__text">phone</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-refresh"></i>
      <div class="icon-item__text">refresh</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-close"></i>
      <div class="icon-item__text">close</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-slide"></i>
      <div class="icon-item__text">slide</div>
    </div>
    <div class="icon-item">
      <i class="iconfont icon-hot"></i>
      <div class="icon-item__text">hot</div>
    </div>
  </div>
</q-demo>

← input →