Im using Font Awesome CDN with Joomla and Helix Ultimate framework. Im trying to implement some icons to my navigation, using the shortcodes. For any reason the "utensils" icon is not working - but its implemented in the freeware. Here is my css:
ul.sp-mega-group li.item-189 a:before{
font-family: 'FontAwesome' !important;
content: '\f017' !important;
font-size: 50px;
color: #5A1F00;
padding-top: 20px !important;
}
ul.sp-mega-group li.item-195 a:before{
font-family: 'FontAwesome' !important;
content: '\f128' !important;
font-size: 50px;
color: #5A1F00;
padding-top: 20px !important;
}
ul.sp-mega-group li.item-196 a:before{
font-family: 'FontAwesome' !important;
content: '\f2e7' !important;
font-size: 50px;
color: #5A1F00;
padding-top: 20px !important;
}
ul.sp-mega-group li.item-197 a:before{
font-family: 'FontAwesome' !important;
content: '\f279' !important;
font-size: 50px;
color: #5A1F00;
padding-top: 20px !important;
}
The other free icons are working. When I`m using an other shortcode für this menulink its working too, so the problem should be the icon itself. Here is a link to the site, the submenu items under "Parkinfos" is the problem.
Hope someone can tell me whats wrong here.
kweb
That icon is not available in 4.7.0, you will need to upgrade to version 5 for that to be available. If you check the icon page here, you will see it was added in version 5. The nearest icon available in your version is 'cutlery' so you can use:
content: '\f0f5' !important;
Also, consider tidying up your CSS:
ul.sp-mega-group li a:before{
font-family: 'FontAwesome' !important;
font-size: 50px;
color: #5A1F00;
padding-top: 20px !important;
}
Then you only need to add the content style to each menu item.
Related
I need to use a magnifying glass icon in the left of an input field, problem is that all of the icons are imported in a separate SCSS file. How can I use these icons in the search field?
The start of the icons.scss file:
#font-face {
font-family: "app";
src:url("../fonts/app.eot");
src:url("../fonts/app.eot?#iefix") format("embedded-opentype"),
url("../fonts/app.woff2") format("woff2"),
url("../fonts/app.woff") format("woff"),
url("../fonts/app.ttf") format("truetype"),
url("../fonts/app.svg#app") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "app" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "app" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
And the Icon from the file that i want to use:
.icon-search:before{
content: "\43";
}
The search SCSS that i want to use the icon in:
.search-div{
padding: 8px 5px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
overflow: hidden;
.ato-search-bar{
//Code here for the background icon
}
}
I have imported the icons scss into my other file, but not sure where to go from there.
You need to use the #extend directive. That means that you will extend your selector with some other selector properties. The extended class will have all the properties of the original class. The #extend directive will alsi extends all the defined pseudo selectors.
// In your icons.scss file
.icon-search:before{
content: "\43";
}
// Later in you css (remember to import icons.scss using: #import "icons";
.search-div{
padding: 8px 5px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
overflow: hidden;
.ato-search-bar{
#extend .icon-search; // Extends the icon class
}
}
Will compile into:
.icon-search:before,
.search-div .ato-search-bar:before {
content: "\43";
}
.search-div {
padding: 8px 5px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
overflow: hidden;
}
Hope it helps.
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
If I put my extension in menu bar, after closing extension some CSS properties doesn't work. (In the add-on toolbar it works perfectly)
Video: http://www.youtube.com/watch?v=iM9EVFe8M4U
github: https://github.com/Exclumice/firex/tree/master/content
CSS: https://github.com/Exclumice/firex/blob/master/skin/overlay.css
CSS properties which become inoperable:
.proxy-help {
background: url("icon-help.png");
background-position: 97% 50%;
background-repeat: no-repeat;
background-color: #e5e5e5;
border-radius: 10px;
padding: 5px;
text-align: center;
width: 100%;
}
.proxy-help-text > label {
width: 80%;
}
.proxy-list hbox > label.proxy-country {
padding: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: url("planet.png");
background-position: 5px center;
background-repeat: no-repeat;
width: 180px;
text-indent: 25px;
}
.proxy-list .proxy-type {
padding: 5px;
width: 50px;
}
How to fix it? Why is this happening?
Thanks in advance.
Ok after testing we find this.
When it is in toolbar, the elements are black in DOM Inspector, so they are NOT anonymous:
But when we move them to PanelUI-popup they become anonymous, notice how they are red in the inspector:
maybe #nmaier can advise here.
I'm thinking a box loses its box'ness so then the % widths you used are taking the % of osme different box once placed in panelui-poup.
I want to add a text content slider over a full screen background website. I'm poor in css. So please help me to add a beautiful text content slider that describes about each background image. The following is my background page
http://alampady.tk/fullbg/testbackground.html
Regards
Ashraf
Add this to your
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
And this to your stylesheet
.colorbag {
position: absolute;
top: 300px;
left: 900px;
width: 500px;
border: thin dotted;
height: 200px;
background-color: #ccc;
opacity: 0.6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 22px;
}
.colorbag span.subtext {
font-weight: 600;
font-size: 22px;
}
.colorbag font {
font-weight: 300;
font-size: 14px;
}
Then I think it will be like 10 times nicer =)
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.