I just need to replace the following code to use the awesome font instead a background image. The goal is replace a button inside wordpress theme.
This is inside style.css
#et-social-icons .youtube .et-social-normal { background: url(images/YT.png) no-repeat 23px 23px; }
#et-social-icons .youtube .et-social-hover { background: url(images/YT-hover.png) no-repeat 23px 23px; }
#et-social-icons .youtube a:hover { background: #de2321; }
And here the part inside header.php to "show" the button:
<li class="youtube">
<a href="https://www.youtube.com/channel/UC3SNuSqLl09zS9IrxXswhIQ">
<span class="et-social-normal"><?php esc_html_e( 'Follow Us On YouTube', 'Nexus' ); ?></span>
<span class="et-social-hover"></span>
</a>
</li>
Thanks to all.
Andrea
You can use pseudo-elements in CSS, :before and :after, like so :
.element:before{
font-family: FontAwesome;
content: "\Unicode";
}
And then position it however you want. You can find the unicode value for each icon by clicking on it, in the "icons" section of the FA website.
Related
i want to move the text displayed at the bottom of font Awesome
enter image description here
i just want to use css ,html to make something like in the image
1- add container for the icon and the text
2- add center the content in the container
3- add style to the icon
4- you can repeat the icon container to make as many as you want copies
HTML :
<div class="icon-container">
<i class="fa fa-home icon"></i> <!-- this should be your icon -->
<h3>sturdy themes</h3>
<p>our themes are updated regularly to keep them bug free!</p>
</div>
CSS :
.icon-container {
width: 300px;
text-align: center;
}
.icon-container p {
color : #b2b2b2;
}
.icon-container i {
color : orange;
font-size: 100px;
}
I am trying to use sprite image to optimise my website.
I uses png format for my image, and the image is like this:
My code css is like this:
.bg-upperbar_1 {
width: 55px; height: 55px;
background: url('../../assets/img/home/spritesheet.png') -10px -10px;
}
My html is like this:
<a class="home-upperbar home-top" href="<?php echo site_url('products/collection_watches'); ?>">
<img class="bg-upperbar_1">
</a>
But when I try to load my page, I'm getting a border for the picture even though the picture is png, like this:
How to solve this problem?
The reason you are getting a border is because your <img> doesn't have a src attribute set. If you want to use a sprite sheet as a background image, then you have to attach it to the <a> tag.
.bg-upperbar_1 {
width: 43px;
height: 45px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) -47px -42px;
}
a{
display:block;
}
<a class="home-upperbar home-top bg-upperbar_1" href="<?php echo site_url('products/collection_watches'); ?>">
</a>
I am trying to add fontawesome arrow icon to submit button in Wordpress using ContactForm7. I have this:
[submit class:button "Send a message "]
in css:
.wpcf7-submit:before {
content: '\f30b';
font-family: 'Font Awesome 5 Free' !important;
}
And it doesnt work, any ideas?
I know I'm a bit late to the party, but I've just found an easier option (or at least I thought so!) that helped me get an icon on my submit button.
No pseudo elements needed, you can just insert the element straight into the Contact Form:
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">
You can also then add styles to the button like this:
/*Then you can add whatever style you want to your button*/
button.wpcf7-submit {
background: #31D1D3;
padding: 10px 15px;
border: 0;
}
button.wpcf7-submit i {
margin-left: 5px
}
button.wpcf7-submit:hover {
color: white;
}
button.wpcf7-submit:hover i {
color: white;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">
Update:
You can even use Font Awesome Ajax Loader instead of the CF7 one!
/*Then you can add whatever style you want to your button*/
button.wpcf7-submit {
background: #31D1D3;
padding: 10px 15px;
border: 0;
}
button.wpcf7-submit i {
margin-left: 5px
}
button.wpcf7-submit:hover {
color: white;
}
button.wpcf7-submit:hover i {
color: white;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<i class="fab fa-github ajax-loader" style="visibility: hidden; opacity: 1;"></i>
Update:
Contact Form 7 by default uses an <input type="submit"> element for the submit button. input elements can't use the ::before/::after pseudo elements because input elements don't have child nodes.
You'll need to change your submit button into an actual button (as shown here) for you to be able to add FontAwesome icons to it.
You also need to specify the font-weight property, otherwise the font won't be loaded by the browser.
.wpcf7-submit::before {
content: "\f30b";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form action="" method="post">
<button type="submit" class="wpcf7-submit">
Send
</button>
</form>
I created a custom attribute with 10 options ( mix10, mix20 .... mix100). What I am trying to do is when I select mix10, to get "mix10" as a custom sticker on product thumbnail image. I have no clue how to add this custom attribute as a small CSS on the thumbnail image of products.
First of all your going to have to look at z-index the styling property and then you're going to need to get the attribute in relation to the image.
Create a simple div over your product image
<div id="mix-sticker" class="mix-sticker_<?php echo $_product->getAttributecode()?>">
<img YOUR PRODUCT IMAGE/>
</div>
Then for your CSS styling you'd need to do something similar to
#mix-sticker {
z-index:500;
width: 400px;
height: 400px;
}
.mix-sticker_1 {
background:url(../images/mix1.png) top left no-repeat;
}
Let's assume you want to put this sticker on the thumbnails in your category listing. Open up /app/design/frontend/[YOURPACKAGE]/[YOURTHEME]/template/catalog/product/list.phtml and find the section that outputs your thumbnail images. It will likely look something like:
<li>
<a>
<img />
<a>
...
</li>
What you will need to do is insert some code right inside the <a> link:
<?php $_product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
<div class="sticker">
<?php if($_product->getData('mix')=='mix10'){echo '<span class="mix10">'.$this->__('Mix10').'</span>'; }
elseif($_product->getData('mix')=='mix20'){echo '<span class="mix20">'.$this->__('Mix20').'</span>'; }
elseif ...
?>
</div>
Added all your options as elseif statements.
Then, in your CSS file, add styling for those stickers. That file will likely be located at /skin/frontend/[YOURPACKAGE]/[YOURTHEME]/css/styles.css:
.sticker {
position: absolute;
left: -5px;
top: -5px;
}
.sticker > span {
font-size: 0;
text-indent: -77777px;
width: 75px; /*image size*/
height: 75px; /*image size*/
background: url(../images/mix10.png) no-repeat left top; /*image location*/
display: block;
}
.sticker > span.mix20 {background: url(../images/mix20.png) no-repeat left top; margin: 1px 0 0 1px}
...
Add styles for all the sticker options you used in your PHTML file and then make sure your images are loaded to the server.
I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
<div class='edit_hover_class'>
<!-- some code -->
</div>
And the corresponding css file contains:
.edit_hover_class:hover {
background: url("trash.gif") no-repeat scroll right top;
}
I want to attach a link to the edit icon, is it possible with plain css? If so, how?
You could hide a link until hover like so:
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
.edit_hover_class a{
visibility:hidden;
}
.edit_hover_class:hover a {
visibility:visible;
}
See jsfiddle:
http://jsfiddle.net/Auzm5/
Or if you only want the icon to link, use CSS visibility:
http://jsfiddle.net/Auzm5/1/
I havent tested this but its worth a try:
HTML
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
CSS
.edit_hover_class a {
pointer-events: none;
cursor: default;
}
.edit_hover_class a:hover {
pointer-events: auto;
cursor: pointer;
}