Docs

[mparalovos@gmail.com]

Hey guys,

I am trying to use a custom designed .jpg for an icon on my accordian. I have set up the following code:

.x-accordion-heading .x-accordion-toggle:before {
    float:left; 
}

.acc1 a.x-accordion-toggle:after {
    content: "";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    line-height: 1;
    color: #fff;
    	font-size: 2em;

    
}

.acc2 a.x-accordion-toggle:after {
    content: "\f21b";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
  	font-size: 2em;
    line-height: 1;
    color: #fff;
    
}

.acc3 a.x-accordion-toggle:after {
    content: "\f023";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    	font-size: 2em;
 line-height: 1;
    color: #fff;
  
}

.acc4 a.x-accordion-toggle:after {
    content: "\f023";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    	font-size: 2em;

   line-height: 1;
    color: #fff;
}

.acc5 a.x-accordion-toggle:after {
    content: "\f14e";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    	font-size: 2em;
 line-height: 1;
    color: #fff;
  
}

.acc6 a.x-accordion-toggle:after {
    content: "\f022";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    	font-size: 2em;
 line-height: 1;
    color: #fff;
  
}
.acc7 a.x-accordion-toggle:after {
    content: "\f07a";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    	font-size: 2em;
 line-height: 1;
    color: #fff;
}
.acc8 a.x-accordion-toggle:after {
    content: "\f023";
    float:left;
    padding:8px;
   margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    	font-size: 2em;
 line-height: 1;
    color: #fff;
  
}

.acc9 a.x-accordion-toggle:after {
    content: "\f044";
    float:left;
    padding:8px;
    margin-top:-6px;
    margin-right:10px;
    font-family:fontAwesome;
    	font-size: 2em;
 line-height: 1;
    color: #fff;
  
}

a.x-accordion-toggle.collapsed:before {
    float:left;
}

a.x-accordion-toggle {
    height: 70px;
}

a.x-accordion-toggle {
    padding-top: 17px!important;
}

but when i try to change the content: to a custom image it doesn’t work. Is that possible? Do i need different css? Thanks!
The image is small and hosted on the same site…

[Christian]

Hey there,

Please see https://css-tricks.com/almanac/properties/c/content/ for more details about the content property.

Thanks.

[mparalovos@gmail.com]

Thanks so much!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts