Alles, was ich tun möchte, ist, ein Hintergrundbild in CSS durch eine Symbolschriftart zu ersetzen, nicht durch ein Symbolbild .. Ich kann es nicht fertigstellen.
.social-networks .Twitter{background:url(../images/social/Twitter.png);}
Dies ist der Code in PHP:
<ul class="social-networks">
<?php if (my_option('Twitter_link')): ?>
<li>
<a href="<?php echo my_option('Twitter_link'); ?>" class="Twitter">Twitter</a>
</li>
<?php endif; ?>
So füge ich eine Inon-Schriftart ein: <span class="icon">A</span>
Sie könnten so etwas versuchen: GEIGE
Nehmen wir an, Sie haben Ihre DIV:
<div class="test"></div>
sie erstellen Ihren CSS-Stil so:
.test {
width: 100px;
height: 100px;
border: 2px solid lightblue;
}
.test:before {
content: "H";
width: 100%;
height: 100%;
font-size: 5.0em;
text-align: center;
display: block;
line-height: 100px;
}
in der Eigenschaft content
wählst du deinen "Buchstaben" und kannst dann den font-size
, font-weight
, color
usw. ändern.
Es gibt eine Inhaltseigenschaft in css:
.icon-rocket:after {
content: "{Symbol for rocket}";
}
Ich habe mir etwas Interessantes ausgedacht: die CSS-Funktion element()
. Momentan ist es funktioniert nur in Firefox (stellen Sie also sicher, dass Sie am Ende ein Beispiel in diesem Browser öffnen).
Hier ist HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="bg-patterns">
<i class="material-icons" id="icon">pets</i>
</div>
<div class="with-icon-bg">
Hi! I'm paragraph with background made from ordinary HTML element! And BTW - I'm a pets lover.
</div>
... und CSS mit Kommentaren:
.material-icons {
/* icon font */
font-family: 'Material Icons';
color: #ddd;
}
/* this is a wrapper for elements you want to use
as backgrounds, should not be visible on page */
.bg-patterns {
margin-left: -90000cm;
}
.with-icon-bg {
/* all magic happens here */
background: -moz-element(#icon);
/* other irrelevant styling */
font-size: 25px;
width: 228px;
margin: 0 auto;
padding: 30px;
border: 3px dashed #ddd;
font-family: sans-serif;
color: #444;
text-align: center;
}
Und schließlich - es gibt ein Arbeitsbeispiel (jsFiddle).
verwenden Sie Navigationstext anstelle von Hintergrundbild.
$(".slider").owlCarousel({
navigation : true,
slideSpeed : 500,
singleItem:true,
navigationText:['<i class="fa fa-chevron-left" aria-hidden="true"></i>', '<i class="fa fa-chevron-right" aria-hidden="true"></i>']
});
und setze die Eigenschaft css für das Icon "font awesome icon".
.owl-button{
position:relative;
}
.owl-prev {
position:absolute;
top:0;
left:47%;
font-size: 30px;
}
.owl-next {
position:absolute;
top:0;
right:47%;
font-size: 30px;
}