{"id":236,"date":"2015-07-05T13:33:54","date_gmt":"2015-07-05T13:33:54","guid":{"rendered":"https:\/\/futuramo.com\/blog-test\/?p=236"},"modified":"2017-11-14T13:27:48","modified_gmt":"2017-11-14T13:27:48","slug":"using-webfont-icons-in-web-development","status":"publish","type":"post","link":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/","title":{"rendered":"Using webfont icons in web development"},"content":{"rendered":"

You downloaded the Futuramo webfont pack and now want to use it in your web project? So now you need to include the attached .css file in your website. It contains the @font-face definition that should be compatible with most browsers.<\/p>\n

\n
\n
\"Example
Example file with CSS styles<\/figcaption><\/figure><\/figure>\n

It also contains definitions for CSS classes that assign the particular glyphs to the icon elements. The attached html file demonstrates the use of the icons and serves as a reference for the glyph names and CSS class names associated with the icons.<\/p>\n

\n
\"An
An example of the demo file<\/figcaption><\/figure><\/figure>\n

Here you can see an example of webfonts usage (HTML and CSS files):<\/p>\n

\"futuramo-using-webfont-icons-in-web-development\"<\/figure>\n

And the result:<\/p>\n

\"futuramo-webfont-usage-result\"<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"You downloaded the Futuramo webfont pack and now want to use it in your web project? So now…\n","protected":false},"author":2,"featured_media":244,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0},"categories":[1],"tags":[],"yoast_head":"\nUsing webfont icons in web development | Futuramo Blog<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using webfont icons in web development | Futuramo Blog\" \/>\n<meta property=\"og:description\" content=\"You downloaded the Futuramo webfont pack and now want to use it in your web project? So now…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-05T13:33:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-14T13:27:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-using-webfont-icons-in-web-development.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"648\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Futuramo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/futuramo.com\/blog\/#website\",\"url\":\"https:\/\/futuramo.com\/blog\/\",\"name\":\"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog\",\"description\":\"Exploring Innovation, Effectiveness, and Creativity Across Industries \",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/futuramo.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#primaryimage\",\"url\":\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-using-webfont-icons-in-web-development.jpg\",\"contentUrl\":\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-using-webfont-icons-in-web-development.jpg\",\"width\":1920,\"height\":648},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#webpage\",\"url\":\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/\",\"name\":\"Using webfont icons in web development | Futuramo Blog\",\"isPartOf\":{\"@id\":\"https:\/\/futuramo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#primaryimage\"},\"datePublished\":\"2015-07-05T13:33:54+00:00\",\"dateModified\":\"2017-11-14T13:27:48+00:00\",\"author\":{\"@id\":\"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902\"},\"breadcrumb\":{\"@id\":\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/futuramo.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using webfont icons in web development\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902\",\"name\":\"Futuramo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/futuramo.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png\",\"contentUrl\":\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png\",\"caption\":\"Futuramo\"},\"url\":\"https:\/\/futuramo.com\/blog\/author\/adminek\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using webfont icons in web development | Futuramo Blog","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_US","og_type":"article","og_title":"Using webfont icons in web development | Futuramo Blog","og_description":"You downloaded the Futuramo webfont pack and now want to use it in your web project? So now…","og_url":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/","og_site_name":"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog","article_published_time":"2015-07-05T13:33:54+00:00","article_modified_time":"2017-11-14T13:27:48+00:00","og_image":[{"width":1920,"height":648,"url":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-using-webfont-icons-in-web-development.jpg","type":"image\/jpeg"}],"twitter_card":"summary","twitter_misc":{"Written by":"Futuramo","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/futuramo.com\/blog\/#website","url":"https:\/\/futuramo.com\/blog\/","name":"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog","description":"Exploring Innovation, Effectiveness, and Creativity Across Industries ","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/futuramo.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#primaryimage","url":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-using-webfont-icons-in-web-development.jpg","contentUrl":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-using-webfont-icons-in-web-development.jpg","width":1920,"height":648},{"@type":"WebPage","@id":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#webpage","url":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/","name":"Using webfont icons in web development | Futuramo Blog","isPartOf":{"@id":"https:\/\/futuramo.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#primaryimage"},"datePublished":"2015-07-05T13:33:54+00:00","dateModified":"2017-11-14T13:27:48+00:00","author":{"@id":"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902"},"breadcrumb":{"@id":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/futuramo.com\/blog\/using-webfont-icons-in-web-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/futuramo.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using webfont icons in web development"}]},{"@type":"Person","@id":"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902","name":"Futuramo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/futuramo.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png","contentUrl":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png","caption":"Futuramo"},"url":"https:\/\/futuramo.com\/blog\/author\/adminek\/"}]}},"_links":{"self":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts\/236"}],"collection":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":9,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":1503,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions\/1503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/media\/244"}],"wp:attachment":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}