I've got a un-ordered list. And I've added icons using the Twitter Bootstrap 3.
Using Carme Font from the Google Fonts. For the normal text Carme font works very well.
But in the unordered list which i created, when I add a icon to it using the BS3, I'm getting icon and the font-family for that particular list is getting changed.
FIDDLE for a better understanding.
Notice the font-family both the list items with and without glyphicons.
I don't know whether the problem is..
Any suggestions will be helpful for me to overcome it.
Icon tag needs to go outside <a> tag
<ul>
<li>
<i class="glyphicon glyphicon-user"></i> One 1
</li>
<li>
One 1
</li>
</ul>
Related
I am working on a website, making it accessible. But I am having some trouble with the voice reader focus going into the items located in the footer.
I tried using aria-label but it didn't work.
I'll attach an image.
The elements enter focus, which I can tell because of the blue ring around the item, but I don't know how to get the orange ring to focus to those anchor elements in the footer.
The problem was created due to the use of "fontawesome.com" for the social media Icons. In order to include an alternative text or label to the element (provide by fontawesome.com) you need to use a different method: In my specific case this solved it:
<a href="https://www.instagram.com/iamthonystark/" aria-label="Instagram">
<i aria-hidden="true" class="fab fa-instagram fa-3x"></i>
</a>
Here is the link to this solution and the solution to other possible issues related to accessibility and fontawesome.com
https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility
I'm new to web technologies and I'm trying to build a navbar basically copying https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black as a learning tool. This worked fine, until I wanted to have an image with one of the buttons, as in the image at (https://imgur.com/lTbVsVD)
The image seems to cause the text to wordwrap. No image but a ton of text and the field just expands... As soon as there's an image there... it wraps. I've tried a whole bunch of different display styles on various elements... I tried putting the image and the text in the same span, which seemed to make sense to me... But I can't seem to figure out what part of css I'm not getting.
edit: the html part
<ul>
<li>
<a href="#">
<img src="img/account_image.svg" /> Bob Smith
</a>
</li>
<li>
<a href="#">
Home
</a>
</li>
Thanks.
Here is the fiddle updated with proper solution.
https://jsfiddle.net/t10jqmr7/1/
Added width to the <img> tag
Also I added clear-fixing the floating elements.
When i hover over the button on my sites menu bar a little box appears, for exmaple when i hover over Home a little box comes up saying "Home".
Is there any pure HTML/CSS way to hide this? I notice that normal sites such as stackoverflow have this turned off.
Thanks
<span>Home</span>
Remove the title attribute, change:
<span>Home</span>
to
<span>Home</span>
You will need to remove the title attribute as it creates a popup displaying the value given to title. You will have to remove the title attribute from where you don't want it.
<span>Home</span>
You can learn more about the title attribute from http://www.w3schools.com/tags/att_global_title.asp
I want to use fa-arrow-circle-down icon like fa-arrow-circle-o-down but it's not possible becaouse these two icons do not have same arrow type. Can we create fa-arrow-circle-o-down width fa-arrow-circle-down's arrow?
No, that isn't possible with the icons available in Font Awesome 4.0. There is a fa-long-arrow-down which is very similar to what you're looking for though.
<span class="fa fa-long-arrow-down"></span>
If you want this specific icon to be added to Font Awesome, your can make an Icon Request issue on their GitHub repository: https://github.com/FortAwesome/Font-Awesome/issues
How do I add an custom icon to the left listview. For each listview I have an icon that is different from one another. I tried using tag to display icon but I get a bit of a problem. What should I add in the css so that it can be done?
<li><img src="css/test.png">Menu 1</li>
The result is like this :
You need to restructure you html a little bit but here's the official documentation on it.
ListView Icons
And foryour example:
<li><img src="css/test.png" class="ui-li-icon ui-corner-none">Menu 1</li>
*Note: This is supposed to be for a 16x16 icon. Your icon may be a lttiel large. Can't quite tell.