{"id":69893,"date":"2025-09-24T03:01:00","date_gmt":"2025-09-23T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69893"},"modified":"2025-09-24T06:29:16","modified_gmt":"2025-09-23T20:29:16","slug":"font-awesome-icons-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/font-awesome-icons-primer-tutorial\/","title":{"rendered":"Font Awesome Icons Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/index.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Font Awesome Icons Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/font_awesome_landing_page.gif\" title=\"Font Awesome Icons Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Font Awesome Icons Primer Tutorial<\/p><\/div>\n<p>Further to the work of <a title='HTML Icons Primer Tutorial' href='#htmlipt'>HTML Icons Primer Tutorial<\/a> we&#8217;re going to include some Font Awesome icons into the mix of the look of our RJM Programming Landing Page today.<\/p>\n<p>In this context, on a webpage, regarding small button style elements, these Font Awesome &#8230;<\/p>\n<ul>\n<li>icons &#8230; can be an alternative to &#8230;<\/li>\n<li>inhouse image thumbnails &#8230;<\/li>\n<li>other image thumbnails &#8230;<\/li>\n<li>emoji buttons and\/or links &#8230;<\/li>\n<li>SVG buttons &#8230;<\/li>\n<li>background image arrangements to button like HTML elements<\/li>\n<\/ul>\n<p> &#8230; where the <a target=\"_blank\" title='Font Awesome website' href='https:\/\/fontawesome.com\/' rel=\"noopener\">Font Awesome<\/a> website was our means towards &#8230;<\/p>\n<ol>\n<li>Information about the products &#8230;<\/li>\n<li>Download functionality &#8230; and then &#8230;<\/li>\n<li>Zip in Downloads folder we unzipped to a new folder &#8230;<\/li>\n<li>Uploaded to the RJM Programming web server &#8230; and regarding the PHP &#8230;<\/li>\n<li>Landing Page we called the CSS link to Font Awesome suite Uploaded above &#8230; and got great help from Search functionality back at <a target=\"_blank\" title='Font Awesome website' href='https:\/\/fontawesome.com\/' rel=\"noopener\">Font Awesome<\/a> website to code for &#8230;<\/li>\n<li>Navigation bar menu improvements to internationalization credentials and self-help aspects to usage &#8230; <font color=blue>such as<\/font> &#8230;<br \/>\n<code><br \/>\n    &lt;a href=\".\/Welcome.html\" class=\"w3-bar-item w3-button w3-padding-large w3-white logo\"&gt;Home <font color=blue>&lt;i class=\"fa fa-solid fa-house\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n    &lt;a href=\".\/Welcome.html\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xwelcome\"&gt;Welcome <font color=blue>&lt;i class=\"fa-solid fa-door-open\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n    &lt;a href=\".\/About_Us.html\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xabout\"&gt;About Us <font color=blue>&lt;i class=\"fa-solid fa-address-card\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n    &lt;a href=\".\/Contact_Us.html\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xcontact\"&gt;Contact Us <font color=blue>&lt;i class=\"fa-solid fa-address-book\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n    &lt;a href=\".\/Services.html\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xservices\"&gt;Services <font color=blue>&lt;i class=\"fa-solid fa-bell-concierge\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n    &lt;a href=\".\/News.html\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xnews\"&gt;News <font color=blue>&lt;i class=\"fa-solid fa-newspaper\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n    &lt;a href=\".\/Guestbook.html\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xguestbook\"&gt;Guestbook <font color=blue>&lt;i class=\"fa-solid fa-book\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n    &lt;a href=\".\/Link.html\" class=\"w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xlinks\"&gt;Links <font color=blue>&lt;i class=\"fa-solid fa-link\"&gt;&lt;\/i&gt;<\/font>&lt;\/a&gt;<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; which you can now see on RJM Programming&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/index.php\" rel=\"noopener\">Landing Page<\/a>.<\/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\/font-awesome-icons-primer-tutorial\/' rel=\"noopener\">Font Awesome Icons Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmlipt'>Previous relevant <a target=\"_blank\" title='HTML Icons Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-icons-primer-tutorial\/' rel=\"noopener\">HTML Icons 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\/html_icons.html\" rel=\"noopener\"><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' rel=\"noopener\">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' rel=\"noopener\">Font Awesome<\/a><\/li>\n<li>Google (<a target=\"_blank\" title='Google Material Icons' href='https:\/\/google.github.io\/material-design-icons\/' rel=\"noopener\">Material Icons<\/a>)<\/li>\n<li><a target=\"_blank\" title='Bootstrap' href='https:\/\/www.bootstrapcdn.com\/' rel=\"noopener\">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\" rel=\"noopener\">html_icons.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_icons.html\" title=\"Click picture\" rel=\"noopener\">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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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\/' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\">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\" rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">&#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<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='#d69893' onclick='var dv=document.getElementById(\"d69893\"); 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='d69893' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Further to the work of HTML Icons Primer Tutorial we&#8217;re going to include some Font Awesome icons into the mix of the look of our RJM Programming Landing Page today. In this context, on a webpage, regarding small button style &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/font-awesome-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,17,19,37],"tags":[2419,174,281,341,451,3289,549,576,584,611,612,620,680,770,3742,997,1319,1343,1411,1418],"class_list":["post-69893","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gui","category-installers","category-tutorials","tag-aesthetics","tag-button","tag-css","tag-display","tag-font","tag-font-awesome","tag-gui","tag-html","tag-icon","tag-install","tag-installation","tag-internationalization","tag-landing-page","tag-menu","tag-navigation-bar","tag-programming","tag-tutorial","tag-upload","tag-web-server","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69893"}],"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=69893"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69893\/revisions"}],"predecessor-version":[{"id":69896,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69893\/revisions\/69896"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}