Css İconlu Rank Yapımı

[bretwskin]

Başlamadan önce ; 
Font için ;

Kod: Tümünü Seç Tümünü Kopyala

https://fonts.google.com

İcon için ;

Kod: Tümünü Seç Tümünü Kopyala

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

Html yazılacak ;

Kod: Tümünü Seç Tümünü Kopyala

<h1 class="rankv2"><i class="fa fa-paint-brush" id="icon"></i><span class="yazi">Grafiker</span></h1>


<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

CSS Yazılacak ;

Kod: Tümünü Seç Tümünü Kopyala

.rankv2 {
 background-color:#00B5F0; /* Arkaplan Rengi */
 color:white;/*Renk*/
 width:200px;/* Genişlik */
 heigt:200px; /* Yükseklik */
 text-shadow:2px 2px 0px #006282; /* Yazıya gölge eklemek için */
 font-family: 'Poppins', sans-serif;/* Font  */
 font-size:20px; /* Yazı boyutu */
}

.yazi {
 margin-left:40px; /* Yazıyı ortalamak için */
}

i {
 background-color:#0099CC; /* İcon arkaplanı renklendirmek için */
 padding:10px;
}

Demo ; https://codepen.io/bretowskin/pen/prLKZg
Açıklamaları yanlarına yazdım eğer anlamadığınız bir yer olursa sorabilirsiniz . 
İyi günler .

[yusufkoc]

Eline sağlık.