cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
<div class="area">
■1 シンプル系
<h1 class="h1">下線付き見出し</h1>
シンプルでいいですね。
<h1 class="h2">点線+色を変える</h1>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h3">二重線見出し</h1>
ここは本文を書くところです。ここは本文を書くところです。 
<h1 class="h4">上下に線</h1>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h5">単純な背景色をつける</h1>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h6">全体を線で囲む</h1>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h7">背景色+下線</h1>
ここは本文を書くところです。ここは本文を書くところです。 
<h1 class="h8">左線</h1>
これもシンプルで好き。
<h1 class="h9">左に線+塗り</h1>
ここは本文を書くところです。ここは本文を書くところです。 
<h1 class="h10">立体感のあるバー</h1>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h11">ボックスシャドウ</h1>
ここは本文を書くところです。ここは本文を書くところです。  
<br>
<br>
<br>
■2 おしゃれ系<br>
<h1 class="h12">タグ風の見出し</h1><br>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h13">吹き出し見出し</h1>
ここは本文を書くところです。ここは本文を書くところです。  
<h1 class="h14">ステッチ風の見出し</h1><br>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h15">ステッチを白にした見出し</h1>
ここは本文を書くところです。ここは本文を書くところです。  
<h1 class="h16">角がぺろっと剥がれるデザイン</h1><br>
ここは本文を書くところです。ここは本文を書くところです。
<h1 class="h17">帯(リボン)風し</h1>
ここは本文を書くところです。ここは本文を書くところです。   
<h1 class="h18">蛍光マーカー風</h1><br>
これも好き。
<h1 class="h19">線先に矢印</h1>
ここは本文を書くところです。ここは本文を書くところです。  
<h1 class="h20">先端が尖ったようなバー</h1>
ここは本文を書くところです。ここは本文を書くところです。<br>
<h1 class="h21">ストライプ+上下線</h1>
ここは本文を書くところです。ここは本文を書くところです。<br>  
<h1 class="h22">ストライプの下線</h1>
ここは本文を書くところです。ここは本文を書くところです。<br>
<h1 class="h23">ストライプの吹き出し</h1>
ここは本文を書くところです。ここは本文を書くところです。<br>
<h1 class="h24">両端に線を伸ばす</h1><br>
ここは本文を書くところです。ここは本文を書くところです。<br>
<h1 class="h25">両端に二重線</h1><br>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h26">下側に小さく線をつける</h1><br>
ここは本文を書くところです。ここは本文を書くところです。<br>
<h1 class="h27">スラッシュで囲む</h1><br>
ここは本文を書くところです。ここは本文を書くところです。<br>  
<h1 class="h28">交差線</h1>
ここは本文を書くところです。ここは本文を書くところです。<br>
<h1 class="h29">葉っぱ風</h1><br>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h30">細カギカッコの見出し</h1><br>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h31">大括弧の見出し</h1><br>
ここは本文を書くところです。ここは本文を書くところです。<br>
<h1 class="h32">立体的なボックス</h1><br>
ここは本文を書くところです。ここは本文を書くところです。<br>  
<h1 class="h33">最初の文字だけ装飾を変える</h1>
ここは本文を書くところです。ここは本文を書くところです。<br>
<br>
<br>
<br>
■3 グラデーション系
<h1 class="h34">消えていく下線</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h35">段々と色が変わっていくパターン</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<br>
<br>
<br>
■4 アイコンフォントを使った見出しサンプル
<h1 class="h36">シンプルなチェックマーク</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h37">おしゃれなシェブロンマーク </h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h38">HTMLタグ風</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h39">ふきだしアイコン</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h40">フラットな見出し </h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h41">コードアイコンのマーカー</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h42">タブ付き</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h43">タブ付きその2</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h44">円にアイコンを入れてバーをつける</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h45">円のまわりに影を付けた場合</h1><br>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h46">さらに立体的にしてみた場合</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<br>
<br>
<br>
■5 かわいい系
<h1 class="h47">フラットな見出し </h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h48">コードアイコンのマーカー</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
<h1 class="h49">タブ付き</h1>
ここは本文を書くところです。ここは本文を書くところです。 <br>
</div>
  
  
</body>
</html>
            
          
!
            
              .area { width: 400px; 
        font-size:16px;}
h1{font-size:24px;
 margin-top:36px;}

.h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/}
.h2 {
color: #6594e0;/*文字色*/
border-bottom: dashed 2px #6594e0;
/*線の種類(点線)2px 線色*/}
.h3 {
border-bottom: double 5px #FFC778;
/*線の種類(二重線)太さ 色*/}
.h4 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/}
.h5 {
background: #c2edff;/*背景色*/
padding: 0.5em;/*文字まわり(上下左右)の余白*/}
.h6 {
color: #364e96;/*文字色*/
border: solid 3px #364e96;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/}
.h7 {
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #c2edff;/*背景色*/
border-bottom: solid 3px #516ab6;/*下線*/}
.h8 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/}
.h9 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}
.h10 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/}
.h11 {
padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);}

.h12 {
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/}
.h12:before {
content: '●';
color: white;
margin-right: 8px;
}

.h13 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;}
.h13:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0; height: 0; }

.h14{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;}
.h15{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;}
.h16{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;}
.h16:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);}
.h17{
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;}
.h17::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);}

.h18 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);}
.h19 {
position: relative;
padding-left: 25px;}
.h19:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px rgb(119, 195, 223);}
.h19:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(119, 195, 223);}
.h20 {
position: relative;
padding: 5px 5px 5px 42px;
background: #77c3df;
font-size: 20px;
color: white;
margin-left: -33px;
line-height: 1.3;
z-index:-1;}
.h20:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2}
.h21 {
color: #6cb4e4;
text-align: center;
padding: 0.25em;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);}

.h22 {position: relative;}
.h22:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);}

.h23 {
position: relative;
padding: 0.6em;
background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
border-radius: 7px;}

.h23:after {
position: absolute;
content: '';
top:   100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffebbe;
width: 0;
height: 0;}

.h24{
position: relative;
display: inline-block;
padding: 0 55px;
}

.h24:before, .h24:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
.h24:before {left:0;}
.h24:after {right: 0;}

.h25{
position: relative;
display: inline-block;
padding: 0 55px;}

.h25:before, .h25:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 2px;
border-top: solid 1px black;
border-bottom: solid 1px black;}
.h25:before {left:0;}
.h25:after {right: 0;}

.h26{position: relative;
display: inline-block;
margin-bottom: 1em;}
.h26:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px; }
.h27{
position: relative;
display: inline-block;
padding: 0 45px;}
.h27:before, .h27:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: black;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.h27:before {left:0;}
.h27:after {right: 0;}

.h28{
position: relative;
padding: 0.25em 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;}
.h28:before, .h28:after{
content: '';
position: absolute;
top: -7px;
width: 2px;
  height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
}
.h28:before {left: 7px;}
.h28:after {right: 7px;}

.h29 {
position: relative;
color: #158b2b;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}
.h29:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #a6ddb0;
border-left-color: transparent;
border-right-color: transparent;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);}


.h30 {
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;}

.h30:before,.h30:after{ 
  content:'';
width: 20px;
height: 30px;
position: absolute;
display: inline-block;}

.h30:before{
  border-left: solid 1px #ff5722;
  border-top: solid 1px #ff5722;
  top:0;
  left: 0;}
.h30:after{
  border-right: solid 1px #ff5722;
  border-bottom: solid 1px #ff5722;
  bottom:0;
  right: 0;}

.h31 {
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
top:0;}
.h31:before,.h31:after{ 
  position: absolute;
  top: 0;
  content:'';
width: 8px;
height: 100%;
display: inline-block;}
.h31:before{
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
  left: 0;}
.h31:after{
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0; }


.h32{
position: relative;
padding: 0.35em 0.5em;
background: #b6e9ff;
color: #393939;}
.h32:before{
content: " ";
position: absolute;
top: -16px;
left: 0;
width: -webkit-calc(100% - 16px);
width: calc(100% - 16px);
height: 0;
border: solid 8px transparent;
border-bottom-color: #b2ddf0;}

.h33:first-letter {
font-size: 2em;
color: #7172ac;}

.h34 {
position: relative;
padding: 0.25em 0;
}
.h34:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

.h35{
position: relative;
padding: 0.25em 0;
}
.h35:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}


.h36 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;}
.h36:before{ font-family: FontAwesome ;/*忘れずに*/
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}

.h37 {
position: relative;/*相対位置*/
padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: #ff6a6a;/*文字色*/
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #fffff4; }

.h37:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0.25em;/*アイコンの位置*/
top: 0.5em;/*アイコンの位置*/
color: #ff6a6a; /*アイコン色*/
}

.h38{
position: relative;/*相対位置*/
line-height: 1.4;/*行高*/
display: inline-block;}
.h38:before,.h38:after{ 
position: relative;
font-family: FontAwesome;
display: inline-block;
font-size: 1.0em;
color: #ff6a6a;}
.h38:before{
  content:"\f053";/*アイコン種類*/
  padding-right: 0.5em}
.h38:after{
content:"\f054";/*アイコン種類*/
padding-left: 0.5em}


.h39 {
position: relative;/*相対位置*/
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/}
.h39:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f075";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/}

.h40{position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;}
.h40:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f14a";
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/}

.h41{
position: relative;
padding-left: 30px;
color:#153c6e;}

.h41:before{
position: absolute;
font-family: FontAwesome;
content: "\f121";
background: #c9e2ff;
color: #153c6e;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}

.h42{
position: relative;
background: #d0ecff;
line-height: 1.4;
padding: 0.25em 0.5em;
margin: 2em 0 0.5em;
border-radius: 0 5px 5px 5px;}
.h42:after {/*タブ*/
  position: absolute;
  font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
  content: '\f00c Check';
background: #2196F3;
color: #fff;
left: 0px;

bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
 	font-size: 0.7em;
 	line-height: 1;
 	letter-spacing: 0.05em}

.h43{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;}
.h43:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em; }

.h44 {
position: relative;
background: #ffd98a;
padding: 2px 5px 2px 25px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;}
.h44:before {
font-family: FontAwesome;
content: "\f135";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ffa337;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white; 
border-radius: 50%;}


.h45 {
position: relative;
background: #f4f4f4;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;}
.h45:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);}

.h46 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;}
.h46:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #81a1e4;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;}

.h47 {
position: relative;/*相対位置*/
padding-left: 1.5em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: black;/*文字色*/}
.h47:before{ font-family: FontAwesome;/*忘れずに*/
color: #ffa7a1;
content: "\f111";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1.4em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: -0.2em;/*アイコンの位置*/}
            
          
!
999px
Loading ..................

Console