I have an menu on my site that sets the icons for the buttons for buttons using the :before tag. This works fine for static elements that can be set in CSS. Some of buttons would load in from specific user settings on the site. Is there a way to set these in CSS using something like this:
.nav-team:before{ background-image:url(attr(src)); }
<li class="nav-team" src="assets/images/profile.png"><a href="#">Team Name</a></li>
As obviously that doesn't work and isn't supported well as mentioned here
I may be wrong but as far as I'm away the :after tag cant be targeted or altered in javascript/jquery.
I'm open to any suggestions, javascript, css or php.
HTML:
<li class="nav-btn nav-team" src="assets/images/profile.png"><a href="#">Team Name</a></li>
CSS
li{
border-top: solid 1px rgba(0, 0, 0, 0.125);
margin: 0.5em 0 0 0;
padding: 0.5em 0 0 0;
position: relative;
}
.nav-btn{
text-indent:1.5em;
}
.nav-btn:before {
font-family:'FontAwesome';
position:absolute;
top:50%;
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
left:-2em;
background-size: auto 1.5em;
background-repeat: no-repeat;
background-position: 1.5em center;
width: 3.5em;
height: 1.5em;
content:' ';
}
.nav-team:before{ background-image:url(attr(src)); }
.nav-home:before{ background-image:url(../icons/feed.svg); }
.nav-envelope:before{ background-image:url(../icons/messages.png); }
First of all, attr() funtion in css is not supported for background-image
property.
as the Answer in Question , you can write javascript for set background image.
You can do this by Jquery
var count = 0;
$('.nav-team').each(function(){
var nav_team = $(this);
var data_id='nav_team'+count
nav_team.attr('data-id',data_id);
var srcPath = nav_team.attr('src')
$('head').append('<style></style>');
$('head style:last').append('[data-id="' + data_id + '"]{ background-image: url("' + srcPath + '"); }'); count++;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.