compatibility with windows phone 7

I’ve just started using the Inkness theme for a photo website (www.cwhitford.me.uk) and found that on WP7, which uses IE9 mobile, the special fonts don’t appear, in particular the ‘menu’ icon and the magnifying glass symbol in the search box. I’ve got round this by creating a child theme, and put code in my functions.php to add extra CSS, as follows:

if (!empty($_SERVER['HTTP_USER_AGENT']) && strpos($_SERVER['HTTP_USER_AGENT'], 'IEMobile/9.0')) {
  add_action('wp_footer', function () {
    echo '<style>@media screen and (max-width:766px){.menu-toggle:before {content:"Menu"}} ' .
    '.fa-search:before {content:"Go"} ' .
    '@media screen and (max-width:320px){#top-search input[type="text"] {width:200px}} ' .
    '</style>';
  });
}

This is in code for 2 reasons: it needs to be loaded after all the CSS files loaded by the parent theme, so I’ve put in in the footer, and b) as it is very short, putting it inline is probably faster than linking to another file.
The first 2 rules change the special symbols to plain text and the 3rd rule reduces the width of the search box. This is needed because with the extra width of the word ‘Go’, the original size does not fit on a viewport width of 320.
This is a bit of a kludge, but it works. Any more elegant solutions would be appreciated. I suppose after a few years WP7 will be history, but it’s still around at the moment (at least one – my phone).