HTML.List.Icon.201705112120

used font-awesome.

by ytyaru

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h2>最小限</h2>

<ul>
    <li class="folder"><span>root</span>
    <ul>
        <li class="file"><span>test.asc</span></li>
    </ul>
    </li>
</ul>

<h2>黒</h2>

<ul>
    <li class="folder"><span>root</span>
        <ul>
            <li class="folder"><span>parent</span>
            <ul>
                <li class="file"><span>test.asc</span></li>
            </ul>
        </ul>
        <li class="file"><span>test.asc</span></li>
    </li>
</ul>

<h2>白</h2>

<ul>
    <li class="folder-o"><span>root</span>
        <ul>
            <li class="folder-o"><span>parent</span>
            <ul>
                <li class="file-o"><span>test.asc</span></li>
            </ul>
        </ul>
        <li class="file-o"><span>test.asc</span></li>
    </li>
</ul>

<h2>マウスオーバー</h2>

<ul>
    <li class="folder-s"><span>root</span>
        <ul>
            <li class="folder-s"><span>parent</span>
            <ul>
                <li class="file-s"><span>test.asc</span></li>
            </ul>
        </ul>
        <li class="file-s"><span>test.asc</span></li>
    </li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0px;
    padding: 0em;
    padding-left: 1em;
}
ul li.folder:before {
    content: "\f07b";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}
ul li.file:before {
    content: "\f15b";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}
ul li span {
	padding-left: 0.25em;
}

ul li.folder-o:before {
    content: "\f114";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}
ul li.file-o:before {
    content: "\f016";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}

ul li.folder-s:before {
    content: "\f114";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}
ul li.folder-s:hover:before {
    content: "\f07b";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}
ul li.file-s:before {
    content: "\f016";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}
ul li.file-s:hover:before {
    content: "\f15b";
	font-family: FontAwesome;
	margin-left:-1em;
    vertical-align:middle;
}