I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)
Related
<div class="nav">
<div class="container">
<ul>
<li><i class="icon-info"></i></li>
<li><i class="icon-edu"></i></li>
<li><i class="icon-employment"></i></li>
<li><i class="icon-skills"></i></li>
<li><i class="icon-photo"></i></li>
<li><i class="icon-personality"></i></li>
</ul>
</div>
</div>
I wanted to make an image navigation bar with active and inactive mode. Active mode is on when hover over or clicked on. So i created the basic navigation list above, then added some CSS codes below.I have already get to the point where browser show all unactive icons by default.
I want to make a single page website, so all navigation icons here will link to a certain place within the page (im also trying to figure out how).
.icon-edu {background-image: url("./Img/Icon-edu.png");
background-repeat: no-repeat;
}
.icon-edu: hover,
.icon-edu: active {
background-image: url("./Img/Icon-edu-active.png");
}
So the problem is, i cannot get the active icon when i hover over the icon, or when they are active. I am not sure what else i need to do?
I am the most newbie-ish newbie, i started with Codecademy and went on making a website. Please take it easy on me :D
firstly you need to have some text in your i tags otherwise it's width will be 0px and you won't see anything (for icons you may want a div with fixed dimensions, but thats another problem) I used a background colour and some dummy text to get it working.
also your selectors don't connect to your a tags. so this will work.
a:hover .icon-edu,
a:active .icon-edu {
background-image: url("./Img/Icon-edu-active.png");
}
for having an active state for a clicked link it's easiest to add another class to the link, in the code that generates the page. In your case you'll need to use jQuery which is a bit more complicated.
I am attempting to create a tooltip system using CSS and a very small amount of JavaScript. So far I have created a structure that goes as follows:
<div class="tooltip" title="foo"></div>
<div class="tooltip" title="bar"></div>
<span id="tooltip-span"></span>
I have created several CSS styles so that the tooltip span is shown on hover and a little bit of JavaScript moves the tooltip to the correct location depending on the mouse position.
However, I have had trouble attempting to make the tooltip's content correspond to the div being hovered over. I have tried using the following CSS, but to no avail:
.tooltip:hover ~ #tooltip-span {
display: inline;
content: attr(title);
}
Is there any way to make the span element have the content of the title of the div being hovered over using CSS?
Thanks for reading!
With pure CSS, no. content: attr(title) sets the content to the title attribute of the matched element, which in your case is #tooltip-span.
To have that work in the way you want, you'd need to update the title attribute of <span id="tooltip-span"></span> using Javascript.
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I'm just fiddling around with jQuery UI. I want a region on my web page to show notifications...however the way jquery demo sites show is not so practical.
The markup on my page goes somewhat like follows:
<div id="msgRow">
<span class="ui-icon ui-icon-info"></span><span id="msg">Some message</span><span class="ui-icon ui-icon-close" id="close-message"></span>
</div>
Problem with the above is the message icon, text, and the close icon all appear in separate lines.
How to make them in the same line?
Ps: fiddle showing how its done jQuery ui way: http://jsfiddle.net/deostroll/EnKNh/
Give them a common class class with css property,display: Inline-Block.
.Sameline
{
Display: Inline-Block;
}
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.