I published a website (a project of my online course) which have social media button at footer area. I linked these with href but when I publish it on github, instead of directing me to "www.twitter.com", it directs me to "...github.io/www.twitter.com". What is the best way to fix this?
My code looks like below;
<footer id="footer">
<i class="fab fa-twitter footer-social"> </i>
<i class="fab fa-facebook-f footer-social"> </i>
<i class="fab fa-instagram footer-social"> </i>
<i class="fas fa-envelope footer-social"> </i>
<p class="p-footer">© Copyright 2018 TinDog</p>
</footer>
Also you can check published version from here: https://tayfunilbakan.github.io/tindog/
Your href values are missing an extra forward slash. Make sure they start with https:// as opposed to https:/.
Related
I don't know how to explain this clearly, the following code notification shows on clicking the link/an href element.
I would like to load it on page load itself, without click, how ?
<a href="" data-toast="snackbar-7">
<i class="fa font-14 fa-check color-green-dark"></i>
<span>Confirmation Snackbar</span>
<i class="fa fa-angle-right"></i>
</a>
<div id="snackbar-7" class="snackbar-toast color-white bg-green-dark mb-4" data-bs-delay="3000" data-bs-autohide="true">
<h1 class="color-white font-20 pt-3 pb-3 mb-n4">Success</h1>
<p class="color-white mb-0 pb-1">Changes applied succesfully.</p>
</div>
The intention is to show notification on database data submission using PHP.
I have this website: https://www.luxit.com.au/. I want to flip the phone icons from the top bar.
I inspected the page and use the class but that is not working. Then I notice that this is a sub-class, that is mentioned with i and then class and then on the last again i.
Can someone help me to find or how to write this type of class correctly in custom CSS. Thank you
Change
fa-phone
to
fa-phone-alt
in the i tag for the icons you want to flip.
e.g. instead of
<i class="fa fa-phone"></i>
change it to
<i class="fa fa-phone-alt"></i>
These are Font Awesome icons, see here https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=phone
You have looked at the relevant code, one good trick is to copy it (Edit HTML and copy it in your devtools) and lay it out properly so you can see what is nested in what.
This is the code in the area you are interested in:
<span class="topbar-content">
<i class="fa fa-phone"></i>
<span>
1300 724 555 </span>
<span> | </span>
<i class="fa fa-phone"></i>
<span>
0452 611 880
</span>
<span class="mobile-clr">
<span> | </span>
</span>
<i class="fa fa-bell"></i>
<span>7am - 10pm, 7 days </span>
<span class="mobile-clr">
<span> </span>
</span>
</span>
I am not clear whether you want to get rid of the lot, in which case:
.topbar-content { visibility: hidden; }
(do this instead of display: none in case some other spacing/positioning is relying on it)
or whether you want to get rid of just one phone number in which case you could start to use nth-of-type but it depends which one you want to get rid of. Let me know if that's the case.
I am using tawdis online tool to validate WCAG 2.0 AA Level compatibility. I am facing an error "Consecutive text and image links to the same resource", when I use below code. How to fix this error in WCAG validation ?
<ul>
<li><div><em class="fa fa-instagram" title="instagram"></em></div></li>
<li><div><em class="fa fa-facebook-square" title="facebook"></em></div></li>
<li><div><em class="fa fa-pinterest-square" title="pinterest"></em></div></li>
<li><div><em class="fa fa-youtube-square" title="youtube"></em></div></li>
</ul>
This refers to the H2: Combining adjacent image and text links for the same resource technique of the WCAG.
As I suppose you have posted your full code, I guess that you use some sort of javascript for those links. And so the Tawdis parser thinks that those links target the same URI.
In reality, this is a bad analyze from that parser as it should have noted that the anchor # is often used to mark a javascript link (although it's not a valid URI and a bad practice).
You have different things to do:
use a meaningful tag for what appears to be a button, not a link,
do not use a tag like em which has a semantic meaning,
provide a text alternative.
Example:
<ul>
<li><button class="fa fa-instagram">Instagram</button></li>
<li><button class="fa fa-facebook-square">Facebook</button></li>
<li><button class="fa fa-pinterest-square">Pinterest</button></li>
<li><button class="fa fa-youtube-square">Youtube</button></li>
</ul>
try this
<ul>
<li><div><em class="fa fa-instagram" title="instagram" alt="instagram"></em></div></li>
<li><div><em class="fa fa-facebook-square" title="face" alt="face"></em></div></li>
<li><div><em class="fa fa-pinterest-square" title="pinta" alt="pinta"></em></div></li>
<li><div><em class="fa fa-youtube-square" title="youtube" alt="youtube"></em></div></li>
</ul>
Techniques/HTML/Combining adjacent image and text links for the same resource
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
According to Google there are a few ways to mark up a 5 star rating to get it pulled through into search results.
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=172705
None of these cater for using an icon-font such as FontAwesome.
The star rating does not need to be interactive.
Currently the code we have is:
<div class="rating">
<meta itemprop="rating" content="4.5" />
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star-half"></i>
<span class="visually-hidden" >4.5 stars</span>
</div>
The span is hidden from displays but is still accessible to screen-readers.
Is the addition of the <meta> tag necessary or even valid?
Google suggests this:
By including <meta itemprop="rating" content="4.5" /> inside the HTML
block that causes the stars to be displayed, you indicate that the
rich snippets parser should use the value in the content attribute to
find the rating.
and has the following example:
<span class="rating-foreground" style="width:90%">
<meta itemprop="rating" content="4.5" />
</span>
As I understand it the itemprop="rating" can be added to any element so can just move that onto your div.
Using the aggregate rating item properties from schema.org, the best option we have so far is the following:
<div class="rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star-half"></i>
<span class="visually-hidden"><span itemprop="ratingValue">4.5</span>/5</span>
</div>
Removing the <meta> tag but adding and separating out the rating value from the total.
You must include itemprop="votes" to google display rating stars in search result
example:
<span class="visually-hidden">
<span itemprop="ratingValue">4.5</span>/5
<span itemprop="votes">10</span>
</span>