lemon-imui-cl/packages/styles/common/icons.styl

基于 VUE2.0 的 IM 聊天组件

// @font-face {
//   font-family: 'lemon-icons'; 
//   src: url('//at.alicdn.com/t/font_1312162_neqltsj20an.eot');
//   src: url('//at.alicdn.com/t/font_1312162_neqltsj20an.eot?#iefix') format('embedded-opentype'),
//   url('//at.alicdn.com/t/font_1312162_neqltsj20an.woff2') format('woff2'),
//   url('//at.alicdn.com/t/font_1312162_neqltsj20an.woff') format('woff'),
//   url('//at.alicdn.com/t/font_1312162_neqltsj20an.ttf') format('truetype'),
//   url('//at.alicdn.com/t/font_1312162_neqltsj20an.svg#iconfont') format('svg');
// }
@font-face {
  font-family: 'lemon-icons';
  src:url("../fonts/icon.woff") format('woff');
}
@font-face {
  font-family: 'lemon-svg-icons';
  src:url('../fonts/icomoon.woff') format('woff');
}
[class^='lemon-icon-'],
[class*=' lemon-icon-']
  font-family lemon-icons !important
  speak none
  font-style normal
  font-weight 400
  font-variant normal
  text-transform none
  line-height 1
  vertical-align baseline
  display inline-block
.lemon-icon-loading:before
  content '\e633'
.lemon-icon-prompt:before
  content '\e71b'
.lemon-icon-message:before
  content '\e84a'
.lemon-icon-attah:before
  content '\e7e1'
.lemon-icon-folder:before
  content '\e7d1'
.lemon-icon-people:before
  content '\e715'
.lemon-icon-group:before
  content '\e6ff'
.lemon-icon-addressbook:before
  content '\e6e2'

[class^='lemon-svg-icon-'],
[class*=' lemon-svg-icon-']
  font-family lemon-svg-icons !important
  speak none
  font-style normal
  font-size 20px
  font-weight 400
  font-variant normal
  text-transform none
  line-height 1
  vertical-align baseline
  display inline-block
.lemon-svg-icon-emoji:before
  content '\e901'
.lemon-svg-icon-image:before
  content '\e902'
.lemon-svg-icon-video:before
  content '\e900'
.lemon-svg-icon-close:before
  content '\e903'
  color #9298A6
.lemon-svg-icon-chat:before
  content '\e908'

  @font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot') format('embedded-opentype'),
            url('../fonts/icomoon.ttf') format('truetype'),
            url('../fonts/icomoon.woff') format('woff'),
            url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ic_play .path1:before {
  content: "\e904";
  color: rgba(0, 0, 0, 0.3);
}
.icon-ic_play .path2:before {
  content: "\e905";
  margin-left: -1em;
  color: none;
}
.icon-ic_play .path3:before {
  content: "\e906";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-ic_fail:before {
  content: "\e907";
  color: #f66;
}
.icon-ic_video:before {
  content: "\e900";
  color: #9298a6;
}
.icon-ic_smile:before {
  content: "\e901";
  color: #9298a6;
}
.icon-ic_pic:before {
  content: "\e902";
  color: #9298a6;
}
.icon-ic_close:before {
  content: "\e903";
  color: #9298a6;
}