{"id":8,"date":"2023-08-25T17:32:27","date_gmt":"2023-08-25T17:32:27","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?page_id=8"},"modified":"2023-08-25T17:32:27","modified_gmt":"2023-08-25T17:32:27","slug":"icons","status":"publish","type":"page","link":"https:\/\/api.jquerymobile.com\/1.3\/icons\/","title":{"rendered":"Icons"},"content":{"rendered":"<h2>Icons<\/h2>\n\n<p>jQuery Mobile provides a number of icons that can be used by applying a <code>data-icon<\/code> attribute to <a href=\"button\/#option-icon\">buttons<\/a>, <a href=\"navbar\/#option-iconPos\">navbar elements<\/a>, <a href=\"listview\/#option-icon\">linked list items<\/a> and <a href=\"selectmenu\/#option-icon\">select menus<\/a>, <code>data-collapsed-icon<\/code> and <code>data-expanded-icon<\/code> to <a href=\"collapsible\/#option-collapsedIcon\">collapsibles<\/a> and <a href=\"collapsible-set\/#option-collapsedIcon\">collapsible-sets<\/a>, and <code>data-split-icon<\/code> to split <a href=\"listview\/#option-splitIcon\">listviews<\/a>. The icon name is self-describing. For example, the following will display a button with a home icon:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;home&quot;<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\n<p>The following is a full list of the icons provided:<\/p>\n\n<p><iframe src=\"\/1.3\/resources\/icons-list.html\" style=\"width:100%;height:350px;border:0px\"><\/iframe><\/p>\n\n<h2>Icons and themes<\/h2>\n<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with themed buttons.<\/p>\n\t\t\n<p><iframe src=\"\/1.3\/resources\/button\/example17.html\" style=\"width:100%;height:450px;border:0px\"><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>A list of the icons provided by jQuery Mobile.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-8","page","type-page","status-publish","hentry","category-reference"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/pages\/8\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}