AnsweredAssumed Answered

Using favicons in jstl elements on customized login page jsp

Question asked by rb0048204 on Jun 21, 2018
Latest reply on Jun 22, 2018 by emunoz


Hi, I'm working on an updated custom Learn login page for our institution. I've mostly been able to work with the elements like <loginUI:loginForm /> and <loginUI:systemAnnouncements /> by styling them with CSS, but one area I'm having difficulty is adding favicons to the login boxes (#loginBox is the BB style).

 

I'm working from a html/css mockup that simulates the learn login like this:

<div class="input-group">

                <input type="text" class="form-control" id="user_id" placeholder="UNM NetID">

                <label for="user_id" class="input-group-addon fa fa-user"></label>

              </div>

            </div>

            <div class="form-group">

              <div class="input-group">

                <input type="password" class="form-control" id="password" placeholder="Password">

                <label for="password" class="input-group-addon fa fa-lock"></label>

              </div>

            </div>

with the favicons designated by the class text in red. It looks like this:

 

I've styled the boxes as above (all except the favicon) using onLoad functions like so:

window.onload = function() {

defaultLink();
randomBg();
document.getElementById('user_id').setAttribute('placeholder','UNM NetID')
document.getElementById('user_id').setAttribute('class','form-control');
document.getElementById('password').setAttribute('placeholder','Password');
document.getElementById('password').setAttribute('class','form-control');
document.getElementById('entry-login').setAttribute('class','btn btn-block btn-large btn-primary');
}

 

But I haven't been able to get the favicons to show up using onLoad (nor am I sure that onLoad is the correct way to go about styling these elements in the first place). To render the favicons, I've tried:

 

document.getElementById('user_id').setAttribute('class','input-group-addon fa fa-user');

and

document.getElementById('user_id’).append('<label for=‘uLogin' class='input-group-addon fa fa-user'></label>);

and adding

label[for=user_id]{ class:"input-group-addon fa fa-user"; }

to the CSS block.

All of those edits either have no effect or break the page (lol)

 

Any advice on how I can attach a <label> tag with a for attribute to the input#user_id element in #loginBox, so that I can attach a favicon? I can share additional code if necessary. Thanks!

Outcomes