I'm trying to add icons, via icomoon fonts, to the left of my text links in wordpress through the menu bar. I'm using the css that comes with the download from icomoon. I've add the class in the menu options area in the admin area of WP. The icons (fonts) DO show up on the 'li' elements but I want them to be added to the 'a' elements instead. FYI, the class that adds the font uses the :before selector. Here's an excerpt of the css:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
color: $white;
}
.icon-home:before {
content: "\68";
}
Try this out. This is the method I use.
HTML
<h3 class="title-style">
<a href="#">
<span aria-hidden="true" data-icon="[insert number from icomoon]";></span>TITLE
</a>
</h3>
CSS
.title-style > a{
font-family: 'font name';
}
[data-icon]::before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
}
Apologies if I'm commenting on the wrong thread, but I'm looking for a way to add an extra field to the WordPress Menus. It's recommended to use "data-icon" rather than a CSS Pseudo :before selector for speed performance. Currently, the WordPress menu does allow inline html <i aria-hidden="true" data-icon="****"></i>, but it would really help if I can create a new input field for the data-icon="***" attribute. This way, it's just a bit cleaner to add font-glyphs to menu items. Later, I hope to be able to add a select drop down menu to this field with previews of the font-glyphs in them, but first I need to be able to make proper use of the Walker for WP Menus.
Related
A lot of sites use the ::before selector on an element to load icons via a client-downloaded font file, e.g.
div {
font: 14px/1 FontAwesome;
}
div::before {
content: "\f1c8";
}
Unfortunately the following rule also applies to the element's ::before pseudo-element, which breaks the icon display:
div {
font-family: sans-serif !important;
}
It's not possible to :not(::before) (source), so how would you go about targeting an element, but not it's ::before?
This worked decently, but it misses the text (if any) inside the element:
div:not([class*="fa-"]) {
font-family: sans-serif !important;
}
It may not even be possible. No JavaScript, please.
It's not possible without then again overwriting the before and after again
div {
font-family: sans-serif;
}
div::before,
div::after {
font-family: serif;
}
Or you could just use the icon in another element entirely.
<span class="fa-something"></span>
<span>Text here</span>
And a s a sidenote :)
Please use textelements for text, not divs (and span is also not a text element, it simply is an inline element without any semantic information)
With #Termani's help above, this is how I solved the problem of injecting my preferred font into websites while doing minimal damage to most site's icons loaded via webfont files:
::before, ::after {
font-family: FontAwesome, "Font Awesome", "Font Awesome 5 Pro",
"Font Awesome 5 Free", "Material Icons", "Material-Design-Iconic-Font",
Flaticon, "CBSi Fantasy icomoon", CBSi_Fantasy_icomoon, icon-moon,
icomoon, ui-icons, icons, NewYorkIcons, sans-serif !important;
}
Without doubt there are other font-family names that developers use, so the list will grow as I stumble upon them.
I'll update this answer if I find a better solution.
I'm trying to understand the CSS selector ::after and ::before.
.h2 a:before{
content: "\f0c1";
font-family: FontAwesome;
font-size: 14px;
}
This adds a FontAwesome icon if said header is a link. However, I'd like to add an empty space after adding this icon. Is this possible with CSS?
Do with "margin-right" property
I'm already using various font-awesome icons on a website.
I'd like to add icons to social media links within my blog posts without having to add them manually to every link.
The structure of a blog post is as follows
<div class="blog-post>
<p>This is some text with a social media link in it</p>
</div>
How can i target these links adding a FA icon using css?
To target a twitter href you can use this CSS selector;
[href*="twitter"]
The * indicates the proceeding value must appear somewhere within the attribute's value. In this case it will target any URL containing the string 'twitter'.
Combining this with the :after selector will place something after the targeted link.
[href*="twitter"]:after
To combine this with font-awesome you would do something like this, remembering to limit it to the blog-post class;
.blog-post [href*="twitter"]:after {
font-family: FontAwesome;
content: "\f099"; // twitter icon
text-decoration: none; // removes underline from the icon in some browsers
display: inline-block; // removes underline from the icon in some browsers
padding-left: 2px;
}
Use :after in your CSS block and write like:
.blog-post:after {
font-family: sans-serif; //or any other you want
content: "\f099"; // twitter icon
............. //other stuff
I've just started using FontAwesome, so far so good. One question though, when I use it with an anchor tag and it has text-decoration:none, and on hover text-decoration:underline. When I hover the link, the icon gets the underline effect, too…how do I get only the link to be underlined, not the icon?
I tried to placing it outside the anchor tag, but it doesn't get the color I assigned to the link
Sample code:
<style>
a{color:red;text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<span class="fa fa-camera-retro"> </span>This's a test
Thank you
I popped your exact code into JSFiddle and noticed that the camera icon itself wasn't being underlined completely, but the space between the icon and the text was.
So, if that's what you're experiencing, you can simply add a bit of padding after the icon, that way there's no whitespace to underline.
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.fa {
padding-right: 5px;
}
a:hover .fa {
color: blue;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>This is a test
The last item in the CSS was merely to show that no underline effect was happening on hover by changing the icon's color to show formatting wasn't being applied from other items. Notice there's no space after the span tag, instead the space is created by the 5px padding applied to anything with the .fa class.
I tested this in both a very recent version of Firefox, and IE9 because those are what's on my work machine.
I had a similar issue, and found that the fa class defines an inline-block display mode. If I forced the display to inline inside a link, then everything was fine.
a > .fa {
display: inline;
}
Put your <span> outside of the <a> so its not affected by your hover...
<span class="fa fa-camera-retro"></span>This is a test
You can add a style for the a:hover span.fa selector:
<style>
a {
color: red;
text-decoration: none;
}
a:hover span.fa {
text-decoration: none;
}
</style>
<span class="fa fa-camera-retro"></span> This is a test
I am looking to style my menu with google translate. Menu works great in English. Menu is 700px wide. When it translates to Spanish it pushes it all down..
So my question: Is there a way to change the font size of text when it goes to Spanish?
I have tried this and it did not work.
.nav a {
font-size: 18px;
}
em:lang(es)) .nav a{
font-size: 14px;
}
I dont know if the code is actually seeing that because Google translate is using js..
Also this is an html site. Not wordpress or anything.
Thanks for any help
You need add lang attribute to your html:
<nav>
<li lang="es">Spanish</li>
<li lang="en">English</li>
</nav>
and css:
nav li[lang|="es"] a{
font-size: 14px;
}
nav li[lang|="es"] en{
font-size: 16px;
}
here is some example.
You just need to change the lang attribute value of li when it goes to Spanish.