Googleマテリアルアイコンの使用例
Google Material icons
HTML
<head>
・
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
・
</head>
<body>
・
<div class="search-box">
<input type="text" placeholder="遠征検索" v-model="keyword" class="encolle-global-search" />
</div>
・
</body>
※v-model はvue使用時の記述です。
CSS
.encolle-global-search{
display:inline-block;
width: 300px;
font-size: 1.2rem;
height: 30px;
line-height: 1;
box-sizing: border-box;
padding: 5px 4px 5px 28px;
color: #687c98;
border-radius: 5px;
font-weight: 700;
border: 1px solid #dcdfe6;
transition: border-color .4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.search-box{
position: relative;
display: inline-block;
}
.search-box::before{
content: '\e8b6';
font-family: 'Material Icons';
font-size: 24px;
color: #ccc;
font-family: 'Material Icons';
position: absolute;
top: 4px;
left: 4px;
}
