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
Related
Is there a way to change the font in my main navigation menu without changing the fonts on the drop downs under them? I'm using Wordpress with a Genesis child theme. This is my site. I just want to change the font on the gray navigation bar, not the links under them.
make CSS rules to this class
.genesis-nav-menu>li>a {
//some CSS
}
Just use the direct child selector example header > ul {font-family:Arial} this will select only the direct children of the header element but not anything deeper
In your style.css on line 948 you have this block of style:
.genesis-nav-menu .menu-item {
text-align: left;
}
Change it to have the font-family declaration in it e.g. if you have Verdana font to add for menu links:
.genesis-nav-menu .menu-item {
text-align: left;
font-family: Verdana;
}
It will change font for all menu links in Genesis theme, but will not effect any other links in the theme.
Can I change color of Font Awesome icon using the ::selection pseudo-element?
I used to do like that
.icon i::selection {
color: #fff;
}
Or that:
.icon i:before::selection {
color: #fff;
}
And other variations. Nothing worked.
Font Awesome icons are added using :before/:after pseudo-elements.
.fa-stack-overflow:before {
content: "\f16c";
}
Since pseudo-elements don't actually exist in the DOM, it's not possible to select them:
5.10 Pseudo-elements and pseudo-classes
Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.
To work around this, you would have to avoid pseudo-elements and add the icon into the HTML directly, which isn't ideal. (example here)
Therefore content: "\f16c" would become , which would have to be wrapped in a .fa element so that the correct font-family is applied: <i class="fa"></i>.
For example:
::selection {
color: #fff;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Selectable since it's added directly to the HTML: <i class="fa"></i>
A more dynamic approach would be to use JavaScript to get the computed content value of the pseudo-element and then remove the pseudo-element and replace it with a unicode entity added directly into the HTML.
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.
I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.
I have a plugin which outputs a profile section, and I plan to wrap it with an ol>li element. I want to style the list numbers using a different font size/style/color. But if I do that the font style will propagate/cascade into the profile. I don't want to restyle every text inside the profile again. So is it possible to prevent the font style from propagating into the descendant elements?
<style>
#rank li{
font-size:50px;
font-style: italic;
font-family: serif;
font-weight: bold;
width:70px;
margin-right:10px;
text-align:center;
}
</style>
<ol id="rank">
<li>
<div class="profile">
<!-- contains complex stuffs including tables, floated div for displaying profiles-->
</div>
</li>
</ol>
EDIT:
Sorry, I over exaggerated about 'restyling every text again'. I think if I need to make profile style unaffected again, I would need to know the default font styles outside the ul, and apply them in the div. It's not much work, but in the future, one need to modify two places to keep the overall style consistent.
Sorry, but no. All font properties cascade (the "C" from CSS) into all child elements and there is no way to prevent it. You're going to have to reset the properties on the child elements if you don't want the same font.
One thing you can, potentially, do is not actually change the font on the <li>, but on a container near it. This will only work in newer browsers, if it works for you, great :) :
ol {
list-style-type : none;
}
ol > li:before {
content : counter(list_counter) " ";
counter-increment : list_counter;
float : left;
font-family : verdana;
}
ol:first-child {
counter-reset: list_counter;
}
You could "reset" the font style on all child elements. It's not actually resetting but it should work with the universal selector. But be carefull since this will actually enforce the font on all child elements, so if you selector is more specific than others it might in the end still affect other elements.
Check this fiddle for an example: http://jsfiddle.net/79ZK5/1/
As I understand this is related to the selector priority that you can use to override the style. Have a look here to understand the Priority of Styles. If you specify the style in your html that would get the highest priority.