icon-fonts

I'm creating some icon font rules for using in my site. Using Sass I wanted to list all the icons in a list variable and use @each to loop through them all. Code looks like this: $icons: wifi 600, wifi-hotspot 601, weather 602; @each $icon in $icons { .icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} { content: "\#{nth($icon, 2)}"; } } The problem is the backslash on the content: line. I need it for the character encoding, but it escapes the variable interpolation, outputting CSS that looks like this: .icon-wifi { content: "\#{nth($icon, 2)}"; } Adding one more backslash like this: content: "\\#

I'm using a large Icon from an icon font my client delivered as a header logo on the index page of a web app. The logo is as large as 60% of the device width and consists of a large round logo (about 40% of the icon) with text below and as wide as 60% of the device in portrait mode. I got the logo with text as one vector icon font icon because the customer want's the text to be exactly as the brands CI demands. _____###_____ ____#####____ _____###_____ Slogan is here It looks alright on the desktop preview and my google nexus 4 Dolphin Browser but in chrome (on the nexus) the slogan is cut off

I want to rotate this font icon 45 degrees. The icon has this CSS (all CSS compiled via LESS): [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-size: 20px; font-style: normal; margin-left: 20px; } And it's this Flaticon: http://www.flaticon.com/free-icon/hand-pointer_70655 I've installed it as an icon font. However, when I try to rotate it 45 degrees, so that the finger points to the top right corner, it doesn't work. I'm trying by installing the icon like so: <i class="flaticon-hand-10 gly-rotate

Closed. This question is off-topic. It is not currently accepting answers. Learn more . Want to improve this question? Update the question so it's on-topic for Stack Overflow. I'd like to create an icon font for use in a web application. fontAwesome, Iconic, fontomas are examples of what I'd like to do but I need to use custom icons. I'm not sure where to start. Any help is appreciated. Inkscape is a great free application for creating graphics with vectors (what modern fonts are made of). FontForge is a great free application for creating fonts, and can import SVG (a great free vector

We're experiencing a weird problem with font icons. First couple of visit they load beautifully, but after a period of idle (usually around 24 hours) on subsequent visits they are replaced by squares. In Chrome, Firefox and even IE it works without problems. When the problem is there I can see the CSS with the embedded font in the inspector but the font does not render. The CSS is cached and it feels like the font is evicted from the cache but never loaded again. We have tried different ways of hosting, bootstrapcdn, our own CDN, and now fonticons.com. No real change. The really weird part is

I am trying to add custom font icons to my sencha architect project, and remove unnecessary theme classes but it seems that Sencha Architect does not use the app.scss at all (located in the resources/sass folder of my project). The changes that I made are neither applied in architect nor when I start the app. app.scss $include-pictos-font: false; $include-default-icons: false; @import 'sencha-touch/default'; @import'sencha-touch/default/src/Class'; @include icon-font('CustomFont', inline-font-files( 'customFont/customFont.woff', woff, 'customFont/customFont.ttf', truetype, 'customFont

I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but how do icon fonts work? I've tried checking the related icon font resources loaded in Chrome to see how icon fonts display icons (in comparison to general fonts) but I haven't been able to figure out how this happens. I've also been unsuccessful in finding resources on how this "icon font technique" is done, even though there are loads of icon fonts available . There are also loads of resources showing how icon fonts can be integrated , but no one seems to be sharing or writing about

I was wondering whether it is possible to use icon font icons (e.g. Font Awesome) as markers in Google Maps V3 to replace the default marker. To show/insert them in a HTML or PHP document the code for the marker would be: <i class="icon-map-marker"></i> Here's my attempt at the same thing (using "markerwithlabel" utility library) before I realised Nathan did the same more elegantly above: http://jsfiddle.net/f3xchecf/ function initialize() { var myLatLng = new google.maps.LatLng( 50, 50 ), myOptions = { zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }, map = new google