webアイコンを使う

webフォントに続き、一つのアイコンのために画像をインストールするのも手間なので、使ってみることに。色々あるなかで、サーバーダウンなどの心配がないかなぁと、googleさんのアイコンを拝借することにした。アイコンは検索窓の虫眼鏡だけあればいいので、シンプルに。

意外とないし、できないし

検索窓にwebアイコンを入れる方法は、Font Awesomeでたくさんみられるが、なぜかgoogleさんが見当たらない。あったとて、試すもなぜかできない。
どうやら、画像の指定はユニコードを使わないといけないらしいが、googleフォントはできない。
ユニコード一覧で試すができない。
「\」とコードでいいらしいもできない。

バックスラッシュも指定を

googleのガイドをみると、バックスラッシュではないものが…。
ということで、ちゃんと指定したらできました。ちょっとのことだけど、時間がかかる…。

capture

<div id="button"><input type="text" class="material-icons" placeholder="&#xe8b6;"></div>

検索窓はtableで

検索窓の中にアイコンを設置する方法は、自分の中で分かりやすかったのはtable-cell。この方法だと背景はつけられないが、レスポンシブでもレイアウトは崩れないので、良いかなと思います。ベストな記述ではないですが、自分のメモに。

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
  <div id="searchcontent">
    <div id="window"><input type="text" value="" name="s" id="s" /></div>
    <div id="button"><input type="text" class="material-icons" placeholder="&#xe8b6;"></div>
	</div>
</form>

#searchcontent{
    width: 86%;
    display: table;
    margin: 15% 7% 15% 7%;
}

#window{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

#s{
    height: 5vh;
    border-radius: 50px 0 0 50px;
    border: 0px solid #000000;
    background: #ffffff;
    width: 100%;
}

#button{
    display: table-cell;
    vertical-align: middle;
}

.material-icons{
    width: 3.1vw;
    height: 5vh;
    border: 1px;
    font-size: x-large;
    background-color: #FFFFFF;
    border-radius: 0 30px 30px 0;
    text-align: left;
}

参考サイト

google guide

google web icon unicode