{"id":48868,"date":"2020-05-01T03:01:50","date_gmt":"2020-04-30T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48868"},"modified":"2020-12-06T20:58:42","modified_gmt":"2020-12-06T10:58:42","slug":"html-icons-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-icons-primer-tutorial\/","title":{"rendered":"HTML Icons Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_icons.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Icons Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_icons.jpg\" title=\"HTML Icons Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Icons Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re delving further into the HTML Icons start we made with yesterday&#8217;s <a title='Negative Margin CSS Primer Tutorial' href='#nmcsspt'>Negative Margin CSS Primer Tutorial<\/a>.<\/p>\n<p>W3school&#8217;s <a target=_blank title='CSS Icons information from W3schools' href='https:\/\/www.w3schools.com\/css\/css_icons.asp'>CSS Icons<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css_icons.asp'><p>\nHow To Add Icons<br \/>\n<br \/>\nThe simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.<br \/>\n<br \/>\nAdd the name of the specified icon class to any inline HTML element (like &lt;i&gt; or &lt;span&gt;).<br \/>\n<br \/>\nAll the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)\n<\/p><\/blockquote>\n<p> &#8230; thanks, mentions three of the major players for you to explore the HTML &#8220;i&#8221; (as one tag idea) Icons &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Font Awesome' href='http:\/\/fontawesome.com'>Font Awesome<\/a><\/li>\n<li>Google (<a target=_blank title='Google Material Icons' href='https:\/\/google.github.io\/material-design-icons\/'>Material Icons<\/a>)<\/li>\n<li><a target=_blank title='Bootstrap' href='https:\/\/www.bootstrapcdn.com\/'>Bootstrap<\/a><\/li>\n<\/ul>\n<p>With this in mind we&#8217;ve written a proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_icons.html_GETME\" title=\"html_icons.html\">html_icons.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_icons.html\" title=\"Click picture\">web application<\/a> to help newbies, here, to explore some more for themselves.  We hope it helps, and will leave you with the chance to try it below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_icons.html\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html-icons-primer-tutorial\/'>HTML Icons Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='nmcsspt'>Previous relevant <a target=_blank title='Negative Margin CSS Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/negative-margin-css-primer-tutorial\/'>Negative Margin CSS Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Negative Margin CSS Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.jpg\" title=\"Negative Margin CSS Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Negative Margin CSS Primer Tutorial<\/p><\/div>\n<p>That HTML editor (in the form of a textarea element) of yesterday&#8217;s <a target=_blank title='HTML Editor Inline HTML Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editor-inline-html-email-tutorial\/'>HTML Editor Inline HTML Email Tutorial<\/a> may help you learn some &#8230;<\/p>\n<ul>\n<li>HTML design<\/li>\n<li>Javascript dynamics &#8230; and &#8230;<\/li>\n<li>CSS styling<\/li>\n<\/ul>\n<p> &#8230; and though for most programmers the Javascript will be the most fun and most demanding aspect to learn regarding the client side of the &#8220;client\/server&#8221; web application model.   The most &#8220;ooh&#8221; &#8220;aahs&#8221; of interest, though, and so motivation to continue learning, are likely to come from an appreciation of CSS styling.<\/p>\n<p>With today&#8217;s web application we try to help the user to see where these &#8220;giant wooooorrrrlllllddds&#8221; meet.  Do you remember <a target=_blank title='XML on the Fly via PHP Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-on-the-fly-via-php-primer-tutorial\/'>XML on the Fly via PHP Primer Tutorial<\/a>&#8216;s observation &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-on-the-fly-via-php-primer-tutorial\/'><p>\nTo get from \u201cDOM\u201d thinking to \u201cDOMDocument\u201d thinking, reminded us of that CSS \u201cmapping\u201d to Javascript DOM idea that you substitute the CSS \u201c-\u201d (minus) and next lowercase letter for a Javascript DOM capital letter &#8230;\n<\/p><\/blockquote>\n<p> &#8230; a Javascript DOM hint for dynamic CSS styling <font color=blue>used in<\/font> (all the Javascript scripting of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.html_GETME\">negative_margins.html<\/a>) &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  function leftchange(iotb) {<br \/>\n    document.getElementById('animg').style.marginLeft='' + iotb.value + 'px';<br \/>\n  }<br \/>\n<br \/>\n  function topchange(iotb) {<br \/>\n    document.getElementById('animg').style.marginTop='' + iotb.value + 'px';<br \/>\n  }<br \/>\n<br \/>\n  function cdov(iotb) {<br \/>\n    document.getElementById('divencaser').style.overflow='' + iotb.value;<br \/>\n  }<br \/>\n<br \/>\n  <font color=blue>function domit(incl) {<br \/>\n    var bits=incl.split('-');<br \/>\n    var retval=bits[0];<br \/>\n    for (var ibits=1; ibits&lt;bits.length; ibits++) {<br \/>\n      retval+=(bits[ibits] + '  ').substring(0,1).trim().toUpperCase() + (bits[ibits] + '  ').substring(1).trim().toLowerCase();<br \/>\n    }<br \/>\n    return retval;<br \/>\n  }<br \/>\n<br \/>\n  function cssdiv(iotb) {<br \/>\n    var clauses=iotb.value.split(';');<br \/>\n    for (var ic=0; ic&lt;clauses.length; ic++) {<br \/>\n      if (clauses[ic].indexOf(':') != -1) {<br \/>\n        eval(\"document.getElementById('divencaser').style.\" + domit(clauses[ic].split(':')[0]) + '=\"' + clauses[ic].split(':')[1].replace(\/\\\"\/g,'').replace(\/\\'\/g,'') + '\";');<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function cssimg(iotb) {<br \/>\n    var clauses=iotb.value.split(';');<br \/>\n    for (var ic=0; ic&lt;clauses.length; ic++) {<br \/>\n      if (clauses[ic].indexOf(':') != -1) {<br \/>\n        eval(\"document.getElementById('animg').style.\" + domit(clauses[ic].split(':')[0]) + '=\"' + clauses[ic].split(':')[1].replace(\/\\\"\/g,'').replace(\/\\'\/g,'') + '\";');<br \/>\n      }<br \/>\n    }<br \/>\n  }<\/font><br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>And in the spirit of trying to get early CSS learners interested in webpage styling we set up a &#8220;nester DIV element&#8221; nesting a &#8220;nested IMG element&#8221; with negative &#8220;margin-left&#8221; and &#8220;margin-top&#8221;.  We&#8217;ve added a &#8220;nester DIV element&#8221; user controllable &#8220;overflow&#8221; property to contextualize this a bit.  Change these settings, and we defy you not to be a tad interested.  The two textboxes open to whatever CSS you want to apply fit into those blue Javascript functions above that you can call into action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/negative_margins.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>Lastly, there is a first, for us, with today&#8217;s web application, our first &#8220;tipping toes into the ocean&#8221; regarding the HTML icon element topic we started our research about at <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_icons.asp' title='CSS Icons information from W3schools'>CSS Icons<\/a> discussion regarding the &#8220;i&#8221; HTML element (as an alternative to emojis, to our mind).  Within that we gave <a target=_blank title='Font Awesome' href='http:\/\/fontawesome.com'>&#8220;Font Awesome Icons&#8221;<\/a> a go, search through the external Javascript (script) &#8230;<\/p>\n<p><code><br \/>\n&lt;script src=\"\/\/kit.fontawesome.com\/a076d05399.js\"&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; searching through for some apt icon for &#8220;margin talk&#8221;, <font color=purple>opting for<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;h1 style='z-index:200;'&gt;Negative Margins Etcetera - RJM Programming - April, 2020 ... <font color=purple>&lt;i class=\"fas fa-border-style\" style=\"font-size:96px;color:blue;\"&gt;&lt;\/i&gt;<\/font>&lt;\/h1&gt;<br \/>\n<\/code> <\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d48865' onclick='var dv=document.getElementById(\"d48865\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/margin\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48865' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d48868' onclick='var dv=document.getElementById(\"d48868\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/icon\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48868' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;re delving further into the HTML Icons start we made with yesterday&#8217;s Negative Margin CSS Primer Tutorial. W3school&#8217;s CSS Icons &#8230; How To Add Icons The simplest way to add an icon to your HTML page, is with an &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-icons-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[2403,281,3289,513,576,584,652,997,1986,1319],"class_list":["post-48868","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-bootstrap","tag-css","tag-font-awesome","tag-google","tag-html","tag-icon","tag-javascript","tag-programming","tag-proof-of-concept","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48868"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=48868"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48868\/revisions"}],"predecessor-version":[{"id":51116,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48868\/revisions\/51116"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}