{"id":58930,"date":"2015-12-16T06:49:28","date_gmt":"2015-12-16T11:49:28","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=58930"},"modified":"2017-07-31T09:54:32","modified_gmt":"2017-07-31T13:54:32","slug":"joomla-3-x-how-to-manage-material-design-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-manage-material-design-icons.html","title":{"rendered":"Joomla 3.x. How to manage Material Design icons"},"content":{"rendered":"<p>\r\n<p>This tutorial shows how to manage <strong>Material Design icons in Joomla 3.x<\/strong>.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=Ib3wBk3q9TY?width=1280&amp;height=720\" rel=\"prettyPhoto\">Joomla 3.x. How to manage Material Design icons<\/a><\/p>\r\n<p>Material design font is used to display specific icons within Joomla  content. They are usually rendered from the file embed to the template structure.  Though editing file is not required, as such change can be performed via Joomla  admin panel:<\/p>\r\n<ol>\r\n<li>\r\n<p>Open Joomla admin panel and navigate  to  <strong>Content -> Articles<\/strong> section. Find there article to replace the icon for. It is reasonable to filter content using <strong>&#8216;Search Tools&#8217;<\/strong> to simplify the search.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Open the article and refer <strong>Images and links -> Caption<\/strong> tab in there. That contains ID of the icon; we should update it with another one.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_1-300x228.jpg\" alt=\"Joomla_3_x_How_to_manage_Material_Design_icons_1\" width=\"300\" height=\"228\" class=\"aligncenter size-medium wp-image-58931\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_1-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_1-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n<li>\r\n<p>The icon names (IDs) are stored under the server files. Open them using either FTP or cPanel and locate<strong> &#8216;templates\/themeXXXX\/css&#8217; <\/strong>folder. Refer <strong>&#8216;linecons.css&#8217;<\/strong> file inside.<\/p>\r\n<p class=\"attention\"><strong>Note: <\/strong>the file name differs depending on the actual material design font used.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Open the required file using any HTML editor. Pick the icon you&#8217;d like to use instead of default one from the list of available ones. Copy its class name.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_2-300x228.jpg\" alt=\"Joomla_3_x_How_to_manage_Material_Design_icons_2\" width=\"300\" height=\"228\" class=\"aligncenter size-medium wp-image-58932\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_2-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_2-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/12\/Joomla_3_x_How_to_manage_Material_Design_icons_2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/p>\r\n<\/li>\r\n<li>Get back to the Joomla admin panel. Paste the copied class name to the<strong> &#8216;Caption&#8217;<\/strong> tab instead of default one.\r\n<p><strong>Note:<\/strong> make sure to have no dot in the beginning of the class name<\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Save changes then. Get  back to the site&#8217;s front-end to view the results. New icon  shows up properly  instead of default one.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=Ib3wBk3q9TY?width=1280&amp;height=720\" rel=\"prettyPhoto\">Joomla 3.x. How to manage Material Design icons<\/a><\/p>\r\n<p><\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/cart.php?addOffer=587\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-1-(500-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to manage <strong>Material Design icons in Joomla 3.x<\/strong>.<\/p>\n","protected":false},"author":66,"featured_media":58934,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[955,674,483,2040],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/58930"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=58930"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/58930\/revisions"}],"predecessor-version":[{"id":82357,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/58930\/revisions\/82357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/58934"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=58930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=58930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=58930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}