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 …
- Font Awesome
- Google (Material Icons)
- Bootstrap
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
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.
