{"id":8,"date":"2023-08-25T17:34:37","date_gmt":"2023-08-25T17:34:37","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?page_id=8"},"modified":"2023-08-25T17:34:37","modified_gmt":"2023-08-25T17:34:37","slug":"icons","status":"publish","type":"page","link":"https:\/\/api.jquerymobile.com\/1.4\/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 or a <code>ui-icon-<\/code> class to a suitable widget.<br>\nThere is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don&apos;t support SVG the framework falls back to PNG icons. 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\">class<\/span>=<span class=\"hljs-string\">&quot;ui-btn ui-icon-home ui-btn-icon-left&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.4\/resources\/icons-list.html\" style=\"width:100%;height:750px;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.4\/resources\/buttonMarkup\/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-jqmicons"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/8\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}