I'm setting up blog for my brand on Blogger and I'm trying to link my social
accounts:
I'm going with a CDN link within the header tag:
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css' rel='stylesheet'/>
within footer tag:
<a class='fb' href='#' rel='nofollow' target='blank' title='Follow Us On Instagram'><i class='fa fa-instagram'/></a>
<a class='twt' href='#' rel='nofollow' target='blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/></a>
<a class='in' href='#' rel='nofollow' target='blank' title='Follow Us On Mastodon'><i class='fa fa-mastodon'/></a>
the classes are just for styling. Background color. So it doesn't affect rendering of the icons in any way.
icons render broken:
Any suggestions ?
Font Awesome 5 and above needs a font-weight: 900
You'll need to add to your CSS something like
i.fa,
i.fas {
font-weight: 900;
}
or if you use the CSS Pseudo-elements with a class, something like:
.your_class::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
More info: https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use
and
https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/css-pseudo-elements
Related
I'm setting up a website and inserting social media links in the footer. I am using Font Awesome's social media icons (see code to understand). To use the icons you must set the tag with a class of whichever icon you would like. I am trying to have the icon bigger than the text associated with it.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a style="font-size:25px;" href="https://www.facebook.com/username/" class="fa fa-facebook"> #username</a>
<a style="font-size:25px;" href="https://www.instagram.com/username/" class="fa fa-instagram"> #username</a>
This code results in the icon and the text associated being both 25px. I would like to change the font-size for the text only to 20px.
You are using the font awesome wrong. They always use the < i > tag for that so you won't have to separate it with css so this is how the html should look:
a {
font-size:20px;
}
a i {
font-size:25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="https://www.facebook.com/username/">
<i class="fa fa-facebook"></i> #username
</a>
<a href="https://www.instagram.com/username/">
<i class="fa fa-instagram"></i> #username
</a>
Also you don't have to apply the inline-block style to the icon, that is already done in the plugin CSS.
Use the span tag
<a>#<span style="font-size: 20px">username</span></a>.
In this way the font size for username is targeted by the span.
Target the pseudo-element
a.fa::before {
font-size:25px;
display: inline-block;
}
a {
font-size:20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
#username
#username
The icon appears in the generated content in ::before. Target that pseudo-element with a stylesheet.
.fa::before {
font-size: 25px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
#username
#username
Depending on your HTML version:
HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
HTML 4.01 specifies that elements may only contain inline elements. fas is a block element, so it may not appear inside an <a>.
You could use a <div> with display: inline inside of your tag, if you use HTML5
Or a span, or some inline property if your HMLT should be compatible < 5
a{
font-size: 200px;
}
.fas{
font-size: 20px;
display: inline;
}
<div class="fas">hi</div>Hello
Many of my links have material icons in tags inside the link. Now, Google has indexed my page with site-links that include the text/ligature from that material-icons tag, so a link might say "shopping_cart Shop Now" for example.
Everything already displays correctly when browsing the site, but it's just in google's search results that the page titles look ridiculous.
<li>
<a href="/feed.php">
<i class="material-icons icon">shopping_cart</i>
<span>Shop Now</span>
</a>
</li>
I would not expect the text "shopping_cart" to appear when Google indexes these page titles for site-links. How can I tell Google to stop doing that?
You can't tell Google to stop indexing that. What you can do is remove what you don't want Google to index. For example, if you don't want it indexing the material icon text then remove the material-icons class and text from the HTML.
What you can do instead is add it via CSS with a pseudo class, here's a pen for example: https://codepen.io/MatthewRader/pen/VNZxdo
your HTML and CSS would look like this:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<li>
<a href="/feed.php">
<span>Shop Now</span>
</a>
</li>
li {
list-style:none;
}
a {
text-decoration: none;
color: PeachPuff;
padding: 10px;
background: SaddleBrown;
}
a::before {
font-family: 'Material Icons';
content: "shopping_cart";
-webkit-font-feature-settings: 'liga';
}
I'm trying to incorporate font-awesome icons in my webpage, and it all works fine, until I change to my font of choice, Exo 2, and the icons show up as a bordered square. It works fine with other fonts, but for some reason this won't work.
I have included the font-awesome stylesheet, and the google fonts stylesheet.
If anyone could point me to what I'm doing wrong, would be appreciated!
This issue with font-awesome could be due to setting other font to the icon. Please see this fiddle
.parent1,
.parent1 > i{
font-family: 'Open Sans', sans-serif;
}
.parent2{
font-family: 'Open Sans', sans-serif;
}
<script src="https://use.fontawesome.com/a30dc5ca39.js"></script>
<div class="parent1">
<i class="fa fa-times"></i>This won't work
</div>
<div class="parent2">
<i class="fa fa-times"></i>This works
</div>
If you set the font to the child element i.e. the <i> element, then font-awesome won't be rendered as you expect.
In the second example I only set different font to the parent, but not the icon, and it works as expected
fontawesome is font icons and Exo 2 is font and not "font icons"
to work fontawesome u must apply
font-family: FontAwesome;
and if u change it to something else here i think "Exo 2"
font-family: Exo 2;
it wont work and will disply u square
After a migration of an existing Content Management System i have some problems with existing classes - sometimes the Richtext Editor created the following HTML Code:
<span style="font-weight: bold; "><a href=""....>
Now, the Link is not bold, but i dont know if it is possible to overwrite any rule in CSS when having a custom inline Style property.
Is there any chance (without changing the HTML Code) to make the link as bold text?
Thanks in advance for any help.
Thanks for the first comments - but to be sure i want to add the "bold" tag only when ill have this "special" inline property. So i dont want to overwrite all classes with bold text.
When i have
<span><a style="font-weight: bold;">....</a>
Everthing is fine, the Link is bold
But when i have
<span style="font-weight: bold;">....
The link is NOT bold (but it should be bold).
This is little stupid Code from the Richtext Editor.
Original:
Use !important :
span {
font-weight: normal !important;
}
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
Edit:
This means that in your CSS, there is somewhere :
span {
font-weight: normal !important;
}
You need to overwrite it by selecting the span with more specificity than the declaration in the current css, e.g:
/* somewhere in the css you can't modify */
span {
font-weight: normal !important;
}
/* the css you add */
.container span {
font-weight: bold !important;
}
<div class="container">
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
</div>
The is because classes, ids, attributes, etc all have a score which add up to see which declaration will be used.
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
- smashingmagazine.com
And here is an cheat sheet :
Is there a way to change the font of the logo, without having to the change the font of the entire page?
Or would I have to create an image using that font and insert into the Navbar?
I wanted to use a font from Google Fonts font for the logo.
Try adding font-family to inline style tag. In the below example if you change the font family then, only the font of logo changes to the specified font.
<a
class="navbar-brand logo"
href="/"
style="font-family:verdana;font-size: 21px; color: #555">
Sometext
</a>
Link HTML to an additional CSS class selector. Let's call it changeFont in this example.
.changeFont
{
font-family: 'Some font name' !important;
}
add class to anchor
<a class="changeFont">Logo Text</a>