From time to time after page refresh fontawesome icons get this rendered this way:
When they should look like this:
Is there anything I am missing my html or CSS?
This is the HTML to display each of those menu options is as simple as:
<li class=""><a ui-sref="Resources" title="Resources">
<i class="fa fa-lg fa-fw fa-globe"></i>
<span class="menu-item-parent ng-binding">Resources</span>
<b class="collapse-sign"><em class="fa fa-plus-square-o"></em></b></a>
</li>
The parent elements for the menu are:
<aside id="left-panel"><nav nav-menu="" stopwatch="true">
<ul><li><!--menu time --></li>
It seems something like mojibake. It could depend on the files (css and html) or document encoding. The file one should be utf-8 without bom.
Related
I have a html webpage containing with lot of css. Let's say if I have one style per div, do I need to add it to my external css file or just write internal css inside of that html page?
Take a look at this example.
<div class="sub">
Link <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</div>
I need to add two different colors to "link" and icons. I can simply do this way.
<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>
Or can add classes and write it to external css also.
<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>
I know those two methods are working but need to know the best practice for this type of situation. Internal or external?
In a short answer:
As far as possible don't use inline style, because inline style has Highest priority after !important keyword.when we have too many lines and use of inline style, it is very hard if we want to find and overlay it.
Actually it's a good practice to have your CSS in external, but it depends upon the situation. For this, it is best to use inline CSS.
I was going over this codepen and I saw this <dropdown> tag. I dont know if this is a legit tag like <div>, <span>, <section> etc..
<dropdown>
<input type="checkbox" id="toggle1" checked>
<label for="toggle1" class="animate">Editor <i class="fa fa-list float-right"></i></label>
<ul class="animate">
<li class="animate">Source <i class="fa fa-code float-right"></i></li>
<li class="animate">Fullpage <i class="fa fa-arrows-alt float-right"></i></li>
<li class="animate">Debug <i class="fa fa-cog float-right"></i></li>
</ul>
</dropdown>
I think Xml allows you to have custom name for tags/ DOM elements but I don't think the author is using Xml.
I think the author made up his own element that describes the section that he is writing about. I didn't know you could do this. I also saw <time> one time being used in html. Can someone explain to me about how it's ok to make up your own tag names or show me documentation. I'm assuming this is an html thing
There is no dropdown element in HTML5 standard set.
HTML5 allows custom elements if they contain '-' in their names. So they'd better use <drop-down>...</drop-down> .
<dropdown> is not a valid HTML tag. Not sure where you get this piece of code from, but you should avoid using custom tag. Use class selector / ID selector instead.
On the other hand, <time> is a HTML tag in HTML5 specification. Documentation is here.
Problem
I am using wordpress and fontawesome icon library to add icon to each list item. I have added class to each list item by enabling "CSS Classes" from "Show advanced menu properties" from Screen option. I tried wp_nav_menu and various other tricks but failed to output class like fa fa-home
Code
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
<li><i class="fa fa-user"></i>About</li>
<li><i class="fa fa-camera"></i>Gallery</li>
<li><i class="fa fa-gift"></i>Shop</li>
<li><i class="fa fa-bullhorn"></i>Blog</li>
<li><i class="fa fa-envelope"></i>contact
</ul><!-- #primary-menu -->
I want to output those classes individually to each "i" element in list item. Please, suggest any code snippets or walk-through.
This code (from your question) is not standard WP code - yours is including <i> elements:
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
</ul>
WP outputs menus like so, without the <i> element:
<ul class="menu">
<li id="menu-item-8" class="fa fa-home menu-item menu-item-type-post_type menu-item-object-page menu-sample-page">
Sample Page
</li>
</ul>
Notice the class fa fa-home on the <li> element above? That was added by adding the class (just like you described). Additionally, it created the icon desired in the menu.
If you aren't getting the icon, ensure that font awesome is actually being loaded, and that the font files are installed and in the right directory relative to the font awesome stylesheet.
How are you adding the <i> elements? The only way you could achieve this (using the technique you are trying to use) would be to Write a custom menu walker, but that's a lot of work to add the icons, since you an add them simply by editing the class via the Menu dashboard.
I have made this website: http://manojpandey.tk/ implementing Bootstrap v.3
In the Contact section, I have added some social buttons.
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
</ul>
They are showing some abnormal behaviour that I don't get. When someone clicks on the button directly, a blank webpage with same url opens. Opening in new tab does good.
But, why does the former does not work. Any help will be appreciated.
<a class="btn btn-default btn-lg" href="http://twitter.com/manojpandey96" target="_top"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
Works for me. So just add:
target="_top"
to the a-Tags.
Is there a reason why you are using frames?
Edit:
The Frames are causing the problem. Without adding target, the link usually will open within the frame. But if you add target="_top", then it will be loaded in the full window, ignoring the frames.
More detailed explanation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
I've got a view that has the following code:
<ul class="nav nav-tabs">
<li class="active"><i class="icon-home"></i> General</li>
<li><i class="icon-picture"></i> Background</li>
<li><i class="icon-edit"></i> Form Container</li>
<li><i class="icon-picture"></i> Logo</li>
<li><i class="icon-tint"></i> Colors</li>
<li><i class="icon-font"></i> Fonts</li>
</ul>
The classes and html attributes are from Twitter Bootstrap but that's not important.
After pressing Ctrl+E+D combination the following code gets changed:
<i class="icon-home"></i> General to <i class="icon-home"></i>General
I also tried putting an empty space between the <i> tags but it gets stripped out as well.
This is effectively moving the tab title closer to the icon and although it's easy to fix I don't want to have to do it every time I benefit from auto code formatting in Visual Studio.
Is there any way to change/tweak this behaviour?
You can play with things here :: Tools/Options/Text Editor/HTML/Formatting
You'll find it a little arduous at times to get things exactly the way you want them, but if there's a way to adjust your spacing, that would be where it is located.