I have an icon which is actually on my webpage but I still cant see it.
HTML
<i class="iconMan"></i>
CSS
.iconMan{
background-image: url(../../assets/imgs/iconMan.png);
display: block;
}
this is what I get:
The Icon should be next to "Test User" but it's not showing. I already tried adjusting height and width but it didn't work.
Any suggestions what I could do?
for displaying an icon you can move your styling to the ::after or ::before pseudo selectors.
.iconMan {
display: inline-block;
}
.iconMan::before {
content: url(../../assets/imgs/iconMan.png);
}
You have missed quotes
.iconMan{
background-image: url("../../assets/imgs/iconMan.png");
display: block;
}
try to do like this
<img src="/assets/imgs/iconMan.png"
I guess it will work
just put this to your html code
Related
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:
These are images that sit within a horizontal list underneath each item using the below base markup.
<ul>
<li>
<a><img src=""/></a>
</li>
<li>
<a><img src=""/></a>
</li>
</ul>
At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.
I was thinking just have a span with a background image like this:
<a><span class="linkedin"></span></a>
.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}
.linkedin:hover{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture-blue-version)
}
However, when I attempted this the space was empty instead of taking the size of the image.
If I enter as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos
Is this the ideal approach?
The problem is if you use a <span> element you need to set it to display: inline-block and you need to set a width for the image to show up. Then it works, here is a demo:
.linkedin {
display: inline-block;
width: 140px;
height:100px;
background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}
.linkedin:hover {
background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
<span class="linkedin"></span>
As you see on the first :hover it flickers. Cause it will not load the image bevore you :hover the first time. This is why you should consider another solution. Like mentioned in some comments you could use http://fontawesome.io/icons/ and then just change the color.
To prevent flickering you could do the same with using <img> tags then the source will be loaded and ready to be shown on :hover. But it works best with also setting positions, demo like so:
a.special {
position: relative;
}
a.special img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
a.special img:first-child {
visibility: visible;
}
a.special:hover img:first-child {
visibility: hidden;
}
a.special:hover img:last-child {
visibility: visible;
}
<a class="special" href="#">
<img src="http://ipsumimage.appspot.com/140x100,ff7700">
<img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
Best approach for this is to use SVG's and change the fill of the SVG on hover.
Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.
Ed: checkout https://css-tricks.com/lodge/svg/
Font-Awesome is a great idea for what you're trying to achieve. Takes less data to load the page too if you can get away with using text in place of images.
By the way, when using the :hover property there is no need to redefine the width and height of the image... Just redefine the changes you'd like to make.
I am having trouble aligning LinkedIn share button on a website. Check the screenshot below -
You can find it live here. The button aligns well on other parts of that page but when it is placed above or below title then it somehow misbehaves.
How can I fix this?
I think this will solve your problem
span.IN-widget > span{
display:block !important;
}
Then clear <br> whick is between them and don't forget to clear element style to display.
In a custom CSS file, add the following:
.IN-widget > span > span {
height: 30px;
}
Make sure the Custom CSS file order is the last.
Output:
Thanks to all those who tried to help! I finally managed to get it aligned.
Solution:
Since the issue occurs only when the buttons are positioned above or below title text so first of all I programatically added a custom class to the LinkedIn button container - btnsx-li-height. Then I applied the below CSS -
.btnsx-li-height .IN-widget {
position: relative;
}
.btnsx-li-height .IN-widget > span > span > span {
position: absolute;
left: -30px;
bottom: -20px;
}
i have two images of text. one with regular text and the other with the same text but with glow effect.
the thing is i want the glow image to replace the regular one while hover.
but instead the glow image appears in addition to the regular one.
please help!!
thanx in advance
here is the code... the background-image attribute is in a comment block because the regular text image is defined as the img src int the html file
#groundPlainLink
{
height:56px;
width: 170px;
margin-left:476px;
float:left;
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/
}
#groundPlainLink:hover
{
background-image: url("../images/txt_menu_ground_plane_glow_pc.png");
}
It appears in addition, because the IMG element renders above the background image. Why not just use CSS, and skip the IMG element?
You have to hide the image on hover.
#groundPlainLink img:hover { opacity:0; }
However, as mentioned above, it'd be easier and simpler to remove the img and rely on background images for this.
EDIT: Or, style the element instead of the div element, then put text inside the link with a font-size:0. That'd do what you're looking for and still be good for screen readers/accessibility/SEO.
a fiddle
https://jsfiddle.net/Hastig/jd23mcnx/
html
<a class="image-link">
<img class="image-default" src="http://i.imgur.com/c0lfxLU.png">
<img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">
</a>
css
.image-link {
display: block;
width: 500px;
margin: 20px auto 0px auto;
}
.image-link img {
width: 500px; height: 300px;
}
.image-hover {
display: none;
}
.image-link:hover .image-default {
displaY: none;
}
.image-link:hover .image-hover {
display: block;
}
I made a thread earlier about putting icons inline. But now, I'm having trouble trying to hover an icon image. For example, say I have a facebook icon, if the mouse is on this icon, I want this icon to bright a bit (not the background, just the icon) in order to indicate that the cursor is on the icon. From my memory, this was done through having two separate images (one with normal icon, the other being brighter than the normal icon) and you fiddle around with the background image within hover in css but I can't seem to work this out. In this example, say the facebook1.png is bright version and facebook.png is a normal one.
HTML
<a class="icons" href="http://www.facebook.com"><img src="images/facebook.png"></a>
CSS
.icons a{
display: inline-block;
width: 64px;
height: 64px;
}
.icons a:hover {
background: url(../images/facebook1.png);
}
still can't seem to get this to work...
Any help would be greatly appreciated.
Thanks in advance.
An easy way to do this is using Javascript. Try using this code:
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("fb_high"))
{
element.src="fb_low.gif";
}
else
{
element.src="fb_high.gif";
}
}
</script>
<img id="myimage" onhover="changeImage()"
src="fb_low.gif" width="#" height="#">
Just insert that into your code wherever you want and it should work. You can also do that with the Twitter icon, but you will need to have two separate pictures.
Use
<a class="icons" href="http://www.facebook.com"></a>
And style as
<style>
.icons{
background: url(../images/facebook.png);
display: inline-block;
width: 64px;
height: 64px;
}
a.icons:hover {
background: url(../images/facebook1.png);
}
</style>
First to the anchor that like following:
<a class="icons" href="http://www.facebook.com">f</a>
And change your css as following:
.icons {
background: url(../images/facebook.png);
display: inline-block;
width: 64px;
height: 64px;
content:"";
}
.icons:hover {
background: url(../images/facebook1.png);
}
This will change your background image.