Bootstrap lock icon not displaying - html

I am trying to add the lock icon on my website using the following code,
<div style="width:10%; background-color:#D6B300; height:50px;">
<p style="color:#044B29;padding: 10px 10px 10px 10px;"><span class="glyphicon glyphicon-lock"></span> Lock</p>
</div>
But for some reason it is not displaying on the site. Please guide. Thanks.

Your site includes Font Awesome CSS but you were using Gylphicon classes in your span.
Right code:
<span class="fa fa-lock"></span>

Related

White box appearing next to button on hover - css issue?

I can't for the life of me figure out what is causing this little white box when hovering over a button. I've recreated the code on codepen and it isn't there.
The html for the section is:
<div class="custom">
<h3><span style="color: #ffffff; margin-top: 50px;"><br>
Thinking of a new website?</span></h3>
<p style="text-align: left;"><span style="color: #ffffff;">Get started with this free guide</span></p>
<h4 style="text-align: left; margin-top: 20px;"><span style="color: #ffffff;">8 Steps To A High Impact Website Redesign</span><br>
<span style="color: #ffffff;"><small>How To Finally Get Your Website Sorted (And Actually Getting Results)</small></span></h4>
<p style="text-align: left;"><span style="color: #ffffff;"><a class="manual-optin-trigger" data-optin-slug="rnrqwxq9x7zlekfs" href="#" style="color: #ffffff;"><span class="btn">Send me the guide</span></a></span></p>
</div>
There are a couple of extensive stylesheets which apply to the page, so I'm not sure whether it would be easier to view the page here.
The button in question is the one about half way down under the heading 'Thinking of a new website?'. If you hover over the button that says 'Send me the guide' you will see it turns yellow and a white box appears to the right of it....I'm baffled???
Can anyone provide any ideas as to what might be causing it?
Thank you in advance.
D

FontAwesome icons in the AppBar of Windows 10 Universal Apps

I'm trying to set a custom icon for my Universal app's appbar. Segoe UI Symbol just doesn't have everything I'm after. I would like to use FontAwesome. Unfortunately, I can't figure out how to do that.
The only official way I can find to put custom icons into an app bar is to use PNGs, but these do not scale as well as font-awesome and are awkward to make.
The closest I've come is to create a div based element on the appbar which looks like an appbar button:
<div data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id:'btnLab',label:'Lab', section:'global', type:'content'}">
<div id="itemContainer" data-win-control="WinJS.UI.ItemContainer">
<i class="fa fa-flask" style="color: #000; font-size: 19px;
padding: 10px; border: 2px solid #222; border-radius: 50%;">
</i>
<br/>
<span style="color: #000; font-size: 12px;">Lab</span>
</div>
</div>
This produces something pretty close to an appbar button, which is clickable and can be assigned a behaviour
With some tweaking I believe I could get this to look identical to a button, however I'm not confident it will scale the same way that normal app bar buttons do. Also when hovering there is this nasty border around it:
Does anyone know how I can just use font-awesome, or some other font based icon set, directly in a button?
I've found an answer for this - it can be done quite easily using script. I used the DOM inspector to find that the actual HTML for the button image is like so
<button class="win-disposable win-command win-global" id="cmdKey" role="menuitem"
aria-label="Key" type="button" data-win-options="{id:'cmdKey',label:'Key',icon:'',
section:'global',tooltip:'testing out font-awesome'}"
data-win-control="WinJS.UI.AppBarCommand">
<span tabindex="-1" class="win-commandicon win-commandring"
aria-hidden="true">
<span tabindex="-1" class="win-commandimage" aria-hidden="true"
style="-ms-high-contrast-adjust: none;"></span>
</span>
<span tabindex="-1" class="win-label" aria-hidden="true">
Key
</span>
</button>
You can very easily target win-commandimage using either jQuery or straight JS and put a font-awesome icon directly in there
$('#cmdKey .win-commandimage').html('<i class="fa fa-key"></i>');
I find the icons a little small, but this can easily be fixed with CSS
#cmdKey .win-commandimage
{
font-size: 20px;
}
I encountered this issue yesterday.
<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{placement: 'bottom'}" style="overflow: hidden;">
<button class="fa fa-flask" style="font-size: 2em; padding-bottom: 15px;" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'flaskBtn', section:'global', label: 'Lab', tooltip:'Lab'}"></button>
</div>
Javascript:
var myAppBar = element.querySelector("#appBar");
myAppBar.winControl.closedDisplayMode = "full";
This worked for me. To enlarge the font size, I had to use style="font-size: 2em" -- for some reason, the larger icon classes (fa-lg, fa-2x, fa-3x, fa-4x) don't work when declared in a class and it's within an AppBar.
class="fa fa-flask fa-2x" works if you create a Font Awesome element outside of an AppBar.

Using Numbers With Font Awesome

I want to use numbers to list steps in a process. I was curious about how to do this with Font Awesome.
I'd like to use circles with a 1, 2, 3... in it. Is this possible?
Will Font Awesome be adding numbers to the list of icons?
Thanks!
Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons.
Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning.
HTML:
<span class="fa-stack fa-3x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<strong class="fa-stack-1x calendar-text">27</strong>
</span>
CSS:
.calendar-text { margin-top: .3em; }
Following code will give a circle with a number
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<strong class="fa-stack-1x">1</strong>
</span>
Following code will give a solid circle with a number
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<strong class="fa-stack-1x text-primary">1</strong>
</span>
Here the text-primary class (from bootstrap) is used to set the colour of the number
To include letters and numbers would make the style sheet for FA way too large and they do not support it ( https://github.com/FortAwesome/Font-Awesome/issues/5019 ). so what i do is like such:
.fa-alph {
font-family: Arial, sans-serif; /* your font family here! */
font-weight: bold;
color: #860000;
font-style: normal;
}
then
<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>
this leaves a nice clean font and you can still use the silly i ( em ) to keep trakc of "icons." Plus this keeps all icon type characters within the same elemental scope... (.fa-^)
I believe this thread was for an icon with a circle around it. So you would modify this CSS above to make it a <span> instead of a <button> and creat a block element in your span.
.f-circle {
font-family: Arial; /* your font family here! */
font-weight: bold;
display: block;
border: 1px solid #860000;
border-radius: 999px;
padding: 6px 12px;
}
then
<span class="f-circle"><i class="fa-alph">2</i></span>
You can just do something like this instead :
<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i>
<i class="fa fa-star" aria-hidden="true"> 3</i>
...
I find this works nicely within WordPress widgets (after adding in the CDN styesheet to the header):
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>
As an alternative to font awesome and HTML/CSS, find an example you like and create something similar in Photoshop. Export the PNGs. Takes about 10 minutes.
Not that I know off! Actually Font awesome is a font used to render icons only. Here is a list of possible icons Fontawesome-icons.
You could do this in many other ways i would do it using one of this 2 other methods depending on what your looking for. For example...
A simple circle with a number inside, the way I would go would be with CSS, creating a circle and using normal text inside. There are tons of posts/examples in google for that. Here is one : how to create circles with css
If you want to achive this with something more graphic/icon I suggest taking a look at Fontello, this creates a font out of your own svg files. So you could do your own numbers with images as background and render the numbers as icons just like fontawesome does.
Have a good one!
Pancho

Having trouble styling a span within an anchor tag in IE6 CSS

The company I work for still uses IE6 therefore I am required to make sure that my site works in IE6 browsers. I'm having trouble styling due to the constraints of the code design done through SharePoint 2007.
When you hover over a non-active tab, the text should change color from blue to orange.
<div class="webpartBody">
<div class="tabsWrapper">
<a class="quickLinkTabs activeTab" href="#">
<span class="tab0">Clinical</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab1">Business Services</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab2">Employees</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab3">Projects</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab4">Web Links</span>
</a>
</div>
<!-- links -->
</div>
jQuery is utilized to create classes for the quickLinkTabs so that the firstTab and lastTab are labeled as such and that the tab that is currently selected is the activeTab.
Using just this code outside of the SharePoint environment, I apply the following CSS to achieve the effect I'm looking for.
.quickLinkTabs:hover
{
color: #ff6600;
}
.quickLinkTabs span:hover
{
color: #ff6600;
}
As soon as I apply this to the development environment and try this on SharePoint generated code, it no longer works. I cannot figure out what the hindrance is - is it SharePoint? is it my CSS?
There is no purpose for the SPAN to be there in the first place. You should adjust the styling of the A-tag to perform the same functionality.
then use:
.tabsWrapper a { .... }
.tabsWrapper a:hover { ... }

Getting a highlight colored icon from jQuery UI as bullet point?

In my jQuery themebuilder built theme I have 5 different ui-icons_* files.
Two of them are in an orange shade corresponding to the highlight color.
I want to use an orange icon as a bullet.
My first attempt gives the icon on it's own row.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" ></span>
Meeting
</div>
My second attempt gives the icon but not aligned properly.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
Adding the following style makes the text align with the icon:
.heading { vertical-align: top; }
http://jsfiddle.net/rypyP/1/
The color i want is in the ui-state-active set, so if I add that state to the containing unit it gets the correct color, but with the whole enchilada (border, background color, text color) and I just want the bullet point orange.
<div class="heading ui-state-active">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
http://jsfiddle.net/MEXQV/1/
Can I get just the icon from a particular ui-state in a jQuery theme without rewriting the css?
If that is not possible, what way would you suggest and why?
SOLUTION
Stylesheet:
.heading
{
vertical-align: top;
}
Html:
<div class="heading">
<span class="ui-state-active" style="border: 0px">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
</span>
</span>
Meeting
</div>
http://jsfiddle.net/rypyP/4/
If you just want to get the icon of a particular ui-state, you can do this:
<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>
What it does is it will look the specified icon on jQuery's default theme icon set (it has four icon sets by default -- active, default, highlight, and error). If you want to remove the borders etc, you'll have to override the ui-state class in your own css, e.g: adding .ui-state-active { border: 0px; }
Thanks.