CODEWITHSUNDEEP
cssglyph
android32
android32

Reputation: 19

Glyph error within CSS

I'm having trouble showing a glyph on my webpage. It appears as a rectangular block but not a "search icon" as intended. This is my code:

.icon-search:before {
    content: "\e602";
 }

I have tried to view my page on multiple browsers, but only Chrome displays it correctly, not Firefox or Opera.

Upvotes: 0

Views: 333

Answers (1)

Connor Simpson
Connor Simpson

Reputation: 487

I've tried this on both Chrome and Firefox and the symbol you're trying to call doesn't exist on many font types. After researching I can only see that you're replicating code from TheSassWay.

TheSassWay's CSS: https://github.com/thesassway/thesassway.com/blob/master/source/stylesheets/partials/_icons.scss

You're not seeing this symbol because you haven't got the font tied to it so it just shows up in a rectangle.

If you want to download the font-package needed for the icons, visit their GitHub page: https://github.com/thesassway/thesassway.com/tree/master/source/fonts

However, I've done minimal research on the copyright of this so you may want to do some more, if you're not allowed to use their icons, why not consider the jQueryUI:

jQuery UI
Grabbing icons from the UI is simple and easy and all you need to do is call upon it from a span tag:

<span class="ui.search-icon"></span>

List of jQueryUI Icons: http://api.jqueryui.com/theming/icons/
CDN for jQueryUI CSS: http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css

Upvotes: 1

Related Questions