Font Awesome Icons Primer Tutorial

Posted on by
Font Awesome Icons Primer Tutorial

Font Awesome Icons Primer Tutorial

Further to the work of HTML Icons Primer Tutorial we’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 elements, these Font Awesome …

  • icons … can be an alternative to …
  • inhouse image thumbnails …
  • other image thumbnails …
  • emoji buttons and/or links …
  • SVG buttons …
  • background image arrangements to button like HTML elements

… where the Font Awesome website was our means towards …

  1. Information about the products …
  2. Download functionality … and then …
  3. Zip in Downloads folder we unzipped to a new folder …
  4. Uploaded to the RJM Programming web server … and regarding the PHP …
  5. Landing Page we called the CSS link to Font Awesome suite Uploaded above … and got great help from Search functionality back at Font Awesome website to code for …
  6. Navigation bar menu improvements to internationalization credentials and self-help aspects to usage … such as …

    <a href="./Welcome.html" class="w3-bar-item w3-button w3-padding-large w3-white logo">Home <i class="fa fa-solid fa-house"></i></a>
    <a href="./Welcome.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xwelcome">Welcome <i class="fa-solid fa-door-open"></i></a>
    <a href="./About_Us.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xabout">About Us <i class="fa-solid fa-address-card"></i></a>
    <a href="./Contact_Us.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xcontact">Contact Us <i class="fa-solid fa-address-book"></i></a>
    <a href="./Services.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xservices">Services <i class="fa-solid fa-bell-concierge"></i></a>
    <a href="./News.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xnews">News <i class="fa-solid fa-newspaper"></i></a>
    <a href="./Guestbook.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xguestbook">Guestbook <i class="fa-solid fa-book"></i></a>
    <a href="./Link.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white xlinks">Links <i class="fa-solid fa-link"></i></a>

… which you can now see on RJM Programming’s Landing Page.

Previous relevant HTML Icons Primer Tutorial is shown below.

HTML Icons Primer Tutorial

HTML Icons Primer Tutorial

Today we’re delving further into the HTML Icons start we made with yesterday’s Negative Margin CSS Primer Tutorial.

W3school’s CSS Icons …

How To Add Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)

… thanks, mentions three of the major players for you to explore the HTML “i” (as one tag idea) Icons …

With this in mind we’ve written a proof of concept html_icons.html web application 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 …

Previous relevant Negative Margin CSS Primer Tutorial is shown below.

Negative Margin CSS Primer Tutorial

Negative Margin CSS Primer Tutorial

That HTML editor (in the form of a textarea element) of yesterday’s HTML Editor Inline HTML Email Tutorial may help you learn some …

  • HTML design
  • Javascript dynamics … and …
  • CSS styling

… and though for most programmers the Javascript will be the most fun and most demanding aspect to learn regarding the client side of the “client/server” web application model. The most “ooh” “aahs” of interest, though, and so motivation to continue learning, are likely to come from an appreciation of CSS styling.

With today’s web application we try to help the user to see where these “giant wooooorrrrlllllddds” meet. Do you remember XML on the Fly via PHP Primer Tutorial‘s observation …

To get from “DOM” thinking to “DOMDocument” thinking, reminded us of that CSS “mapping” to Javascript DOM idea that you substitute the CSS “-” (minus) and next lowercase letter for a Javascript DOM capital letter …

… a Javascript DOM hint for dynamic CSS styling used in (all the Javascript scripting of negative_margins.html) …


<script type='text/javascript'>
function leftchange(iotb) {
document.getElementById('animg').style.marginLeft='' + iotb.value + 'px';
}

function topchange(iotb) {
document.getElementById('animg').style.marginTop='' + iotb.value + 'px';
}

function cdov(iotb) {
document.getElementById('divencaser').style.overflow='' + iotb.value;
}

function domit(incl) {
var bits=incl.split('-');
var retval=bits[0];
for (var ibits=1; ibits<bits.length; ibits++) {
retval+=(bits[ibits] + ' ').substring(0,1).trim().toUpperCase() + (bits[ibits] + ' ').substring(1).trim().toLowerCase();
}
return retval;
}

function cssdiv(iotb) {
var clauses=iotb.value.split(';');
for (var ic=0; ic<clauses.length; ic++) {
if (clauses[ic].indexOf(':') != -1) {
eval("document.getElementById('divencaser').style." + domit(clauses[ic].split(':')[0]) + '="' + clauses[ic].split(':')[1].replace(/\"/g,'').replace(/\'/g,'') + '";');
}
}
}

function cssimg(iotb) {
var clauses=iotb.value.split(';');
for (var ic=0; ic<clauses.length; ic++) {
if (clauses[ic].indexOf(':') != -1) {
eval("document.getElementById('animg').style." + domit(clauses[ic].split(':')[0]) + '="' + clauses[ic].split(':')[1].replace(/\"/g,'').replace(/\'/g,'') + '";');
}
}
}
</script>

And in the spirit of trying to get early CSS learners interested in webpage styling we set up a “nester DIV element” nesting a “nested IMG element” with negative “margin-left” and “margin-top”. We’ve added a “nester DIV element” user controllable “overflow” 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’s live run link.

Lastly, there is a first, for us, with today’s web application, our first “tipping toes into the ocean” regarding the HTML icon element topic we started our research about at CSS Icons discussion regarding the “i” HTML element (as an alternative to emojis, to our mind). Within that we gave “Font Awesome Icons” a go, search through the external Javascript (script) …


<script src="//kit.fontawesome.com/a076d05399.js"></script>

… searching through for some apt icon for “margin talk”, opting for …


<h1 style='z-index:200;'>Negative Margins Etcetera - RJM Programming - April, 2020 ... <i class="fas fa-border-style" style="font-size:96px;color:blue;"></i></h1>

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, GUI, Installers, Tutorials and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *