html - データアイコンが Firefox/Chrome で機能しない

Question

これが Safari では機能するのに、Firefox や Chrome では機能しない理由がわかりませんか?

HTML:

<input type="search" placeholder="Search" id="search" name="search" id="s" data-icon="s">

CSS:

#search[data-icon]:before {
    font-family: 'Pictos Custom';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}

どんな助けでも感謝します。