{"id":1806,"date":"2018-04-04T21:36:55","date_gmt":"2018-04-05T02:36:55","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1806"},"modified":"2018-04-04T21:36:55","modified_gmt":"2018-04-05T02:36:55","slug":"html-css-stack-font-awesome-icons","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/04\/04\/html-css-stack-font-awesome-icons\/","title":{"rendered":"HTML &#038; CSS: How to stack Font Awesome icons"},"content":{"rendered":"<p>In order to stack Font Awesome ions, someone wrote a custom CSS solution that features a class called &#8220;icons-stack&#8221;, which looks like:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.icon-stack {\r\n  position: relative;\r\n  display: inline-block;\r\n  width: 150px;\r\n  height: 150px;\r\n  line-height: 80px;\r\n  vertical-align: middle;\r\n}\r\n.icon-stack-1x,\r\n.icon-stack-2x,\r\n.icon-stack-3x {\r\n  position: absolute;\r\n  left: 0;\r\n  width: 100%;\r\n  text-align: center;\r\n}\r\n.icon-stack-1x {\r\n  line-height: inherit;\r\n}\r\n.icon-stack-2x {\r\n  font-size: 70px;\r\n}\r\n.icon-stack-3x {\r\n  font-size: 150px;\r\n}<\/pre>\n<p>In the HTML, you would use a span and place the stacked icons inside. These icons will be designated with &#8216;icon-stack-2x&#8217; or &#8216;icon-stack-3x&#8217;. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;span class=\"icon-stack\"&gt;\r\n   &lt;i class=\"fa fa-sun-o icon-stack-3x ot-icons-od\"&gt;&lt;\/i&gt;\r\n   &lt;i class=\"fas fa-exclamation-triangle icon-stack-2x ot-icons-od\"&gt;&lt;\/i&gt;\r\n&lt;\/span&gt;<\/pre>\n<p>In this example, I stacked the FA version 4 &#8220;fa-sun-o&#8221; icon with FA version 5 &#8220;fa-exclamation-triangle&#8221; icon.<\/p>\n<p class='codepen'  data-height='300' data-theme-id='0' data-slug-hash='WzKOgq' data-default-tab='css,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen how to stack font awesome icons by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n<p>&nbsp;<\/p>\n<p>The original solution on Stack Overflow can be seen here:<br \/>\n<a href=\"https:\/\/stackoverflow.com\/a\/25596423\/2317066\">https:\/\/stackoverflow.com\/a\/25596423\/2317066<\/a><br \/>\nFont Awesome is here:<br \/>\n<a href=\"https:\/\/fontawesome.com\/\">https:\/\/fontawesome.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In order to stack Font Awesome ions, someone wrote a custom CSS solution that features a class called &#8220;icons-stack&#8221;, which looks like: .icon-stack { position: relative; display: inline-block; width: 150px; height: 150px; line-height: 80px; vertical-align: middle; } .icon-stack-1x, .icon-stack-2x, .icon-stack-3x { position: absolute; left: 0; width: 100%; text-align: center; } .icon-stack-1x { line-height: inherit; } &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/04\/04\/html-css-stack-font-awesome-icons\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">HTML &#038; CSS: How to stack Font Awesome icons<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[10,122,105],"class_list":["post-1806","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-css","tag-font-awesome","tag-html"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1806"}],"version-history":[{"count":8,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1806\/revisions"}],"predecessor-version":[{"id":1815,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1806\/revisions\/1815"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}