폰트어썸::폰트어썸그래프

 

 

Font-awesome Graphs!

Beautiful graph icons. haha~

html / css : 먼저 스타일을 적용

<style>
i {font-size: 5rem !important; color: #2c3e50; height: auto; line-height: 0; margin: 15px;}
i:after {position: absolute; content: attr(data-name); font-size: 12px; color: black; display: block; width: 100%; min-height: 40px; text-align: center;  top: calc(100% + 5px); overflow: auto; font-family: 'roboto', sans-serif;}
i i {position: absolute; left: -15px; top: -19%; color: lightgrey; overflow: hidden;}
[data-percentage="25"] {height: 75%;}
[data-percentage="50"] {height: 50%;}
[data-percentage="75"] {height: 25%;}
[data-percentage="100"] {height: 0%;}
</style> 

 

 

I love bar charts - 100% 적용

<i class="fa fa-bar-chart" data-name="I love bar charts"><i data-percentage="100" class="fa fa-bar-chart"></i></i>

 

I like line charts - 75% 적용

<i class="fa fa-line-chart" data-name="I like line charts"><i data-percentage="75" class="fa fa-line-chart"></i></i>

 

I like pie charts - 50% 적용

<i class="fa fa-pie-chart" data-name="I don't care for pie charts"><i data-percentage="50" class="fa fa-pie-chart"></i></i>

 

I like line charts - 25% 적용

<i class="fa fa-area-chart" data-name="I dislike area charts"><i data-percentage="25" class="fa fa-area-chart"></i></i>

 

I hate trash - 0% 적용

<i class="fa fa-trash" data-name="I hate trash"><i data-percentage="0" class="fa fa-trash"></i></i>