IcoMoon-mail3
テキストの中でご利用の場合はこちらが便利です。(spanタグにclassを指定するだけです。)
<span class="IcoMoon-mail3"></span>
HTMLリストや見出しなどでご利用の場合はこちらのCSSをベースにカスタマイズすると便利です。
.IcoMoon-mail3::before {
   font-family: "IcoMoon";
   content: "\ea85";
}
一部のカラーフォントには、cssやタグによる色の指定が無効なものがあります。色指定が無効なフォントは、使用例をご確認ください。アイコンと文字のフォントスタイルが異なるフォントがカラー系cssの適用されないフォントです。
  • .red { color: #ff0000; }
  • ピンク
    .pink { color: #ffc0cb; }
  • .blue { color: #0000ff; }
  • 水色
    .cyan { color: #00ffff; }
  • .green { color: #008000; }
  • 黄緑
    .lime { color: #00ff00; }
  • .yellow { color: #ffff00; }
  • .gold { color: #ffd700; }
  • レインボーグラデーション
    .grad-rainbow {
       color: #FF8C00;
       background: -webkit-linear-gradient(0deg, #40E0D0, #FF8C00, #FF0080);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
    }
  • メタリックグラデーション
    .grad-metalic {
       color: #DA8E00;
       background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
    }
  • 縁取り文字
    .outline {
       display : inline-block;
       color : #ffffff;
       letter-spacing : 4px;
       text-shadow :
          2px 2px 1px #003366,
          -2px 2px 1px #003366,
          2px -2px 1px #003366,
          -2px -2px 1px #003366,
          2px 0px 1px #003366,
          0px 2px 1px #003366,
          -2px 0px 1px #003366,
          0px -2px 1px #003366;
    }
  • 浮き文字
    .floatline {
       display : inline-block;
       font-weight : bold;
       color : #ffffff;
       text-shadow: 2px 2px 10px #777 ,
          -2px 2px 10px #777 ,
          2px -2px 10px #777 ,
          -2px -2px 10px #777;
    }
  • 影付き文字
    .shadowline {
       display : inline-block;
       color : #000000;
       text-shadow : 3px 3px #aaaaaa;
    }