我使用了来自themeforest的模板中的一组自定义图标。
我无法使用Django显示它们，我不知道为什么。特别是Icon图像没有加载 - 它们应该是空白区域。
样式设置为静态文件，网站的其余部分加载，我假设它与样式链接到一堆.svg，.eot，.ttf，.woff文件。< / p>
提前致谢 - 我在github上获得了大部分内容，https://github.com/Hewlbern/Videography-Website
静态文件结构
static/
css/
font-icons
font-icons-rtl
font-icons-snapchat
fonts/
a bunch of svg, eot, ttf files where I assume the images / icons are kept.
HTML
<div class="common-height clearfix">
<div class="col-md-8">
<div class="max-height">
<div class="row common-height grid-border clearfix">
<div class="col-md-4 col-sm-6 col-padding">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
<div class="fbox-icon">
<a href="#"><i class="icon-et-mobile"></i></a>
</div>
<h3>Responsive Framework</h3>
</div>
</div>
<div class="col-md-4 col-sm-6 col-padding">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
<div class="fbox-icon">
<a href="#"><i class="icon-et-presentation"></i></a>
</div>
<h3>Beautifully Presented</h3>
</div>
</div>
<div class="col-md-4 col-sm-6 col-padding">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
<div class="fbox-icon">
<a href="#"><i class="icon-et-puzzle"></i></a>
</div>
<h3>Extensively Extendable</h3>
</div>
</div>
<div class="col-md-4 col-sm-6 col-padding">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
<div class="fbox-icon">
<a href="#"><i class="icon-et-gears"></i></a>
</div>
<h3>Powerfully Customizable</h3>
</div>
</div>
<div class="col-md-4 col-sm-6 col-padding">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
<div class="fbox-icon">
<a href="#"><i class="icon-et-genius"></i></a>
</div>
<h3>Geniusly Transformable</h3>
</div>
</div>
<div class="col-md-4 col-sm-6 col-padding">
<div class="feature-box fbox-center fbox-dark fbox-plain fbox-small nobottomborder">
<div class="fbox-icon">
<a href="#"><i class="icon-et-hotairballoon"></i></a>
</div>
<h3>Industrial Support</h3>
</div>
</div>
</div>
</div>
</div>
</div>
定型
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700|Roboto:300,400,500,700" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/et-line.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/fonts.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/onepage.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dark.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/font-icons.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/responsive.css' %}" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
的Javascript
<script type="text/javascript" src="{% static 'javascript/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'javascript/plugins.js' %}"></script>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDMxJ92oBkSnVNHFX3R8XhtYQPEgk1_IiI"></script>
<script type="text/javascript" src="{% static 'javascript/jquery.gmap.js' %}"></script>
<script type="text/javascript" src="{% static 'javascript/functions.js' %}"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.videoplay-on-hover').hover( function(){
if( $(this).find('video').length > 0 ) {
$(this).find('video').get(0).play();
}
}, function(){
if( $(this).find('video').length > 0 ) {
$(this).find('video').get(0).pause();
}
});
});
jQuery(window).load(function(){
// Google Map
jQuery('#headquarters-map').gMap({
address: 'Melbourne, Australia',
maptype: 'ROADMAP',
zoom: 14,
markers: [
{
address: "Melbourne, Australia",
html: "Melbourne, Australia",
icon: {
image: "images/icons/map-icon-red.png",
iconsize: [32, 32],
iconanchor: [14,44]
}
}
],
doubleclickzoom: false,
controls: {
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
},
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
});
});
</script>
有问题的CSS
@font-face {
font-family: 'font-icons';
src:url('fonts/font-icons.eot');
src:url('fonts/font-icons.eot') format('embedded-opentype'),
url('fonts/font-icons.woff') format('woff'),
url('fonts/font-icons.ttf') format('truetype'),
url('fonts/font-icons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lined-icons';
src:url('fonts/lined-icons.eot');
src:url('fonts/lined-icons.eot') format('embedded-opentype'),
url('fonts/lined-icons.woff') format('woff'),
url('fonts/lined-icons.ttf') format('truetype'),
url('fonts/lined-icons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Simple-Line-Icons';
src:url('fonts/Simple-Line-Icons.eot');
src:url('fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
url('fonts/Simple-Line-Icons.woff') format('woff'),
url('fonts/Simple-Line-Icons.ttf') format('truetype'),
url('fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"],
[class^="icon-line-"], [class*=" icon-line-"],
[class^="icon-line2-"], [class*=" icon-line2-"],
.side-header #primary-menu ul > li.sub-menu > a:after {
display: inline-block;
font-family: 'font-icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-line-"], [class*=" icon-line-"] { font-family: 'lined-icons'; }
[class^="icon-line2-"], [class*=" icon-line2-"] { font-family: 'Simple-Line-Icons'; }
.icon-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.icon-2x {
font-size: 2em;
}
.icon-3x {
font-size: 3em;
}
.icon-4x {
font-size: 4em;
}
.icon-5x {
font-size: 5em;
}
.icon-fw {
width: 1.2857142857142858em;
text-align: center;
}
.iconlist {
padding-left: 0;
margin-left: 1.75em;
list-style-type: none;
}
.iconlist li { position: relative; }
.iconlist ul {
list-style-type: none;
margin: 5px 0 5px 25px;
}
.iconlist > li [class^="icon-"]:first-child, .iconlist > li [class*=" icon-"]:first-child {
position: absolute;
left: -1.75em;
width: 1.75em;
text-align: center;
top: 1px;
width: 14px;
}
.iconlist.iconlist-large { font-size: 16px; }
.iconlist.iconlist-large li { margin: 4px 0; }
.iconlist.iconlist-large > li [class^="icon-"], .iconlist.iconlist-large > li [class*=" icon-"] {
width: 16px;
margin-right: 5px;
}
.iconlist-color li i { color: #1ABC9C; }
.icon-border {
padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}
.icon.pull-left {
margin-right: .3em;
}
.icon.pull-right {
margin-left: .3em;
}
.icon-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.icon-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.icon-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.icon-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.icon-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
.icon-stacked {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.icon-stacked-1x,
.icon-stacked-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.icon-stacked-1x {
line-height: inherit;
}
.icon-stacked-2x {
font-size: 2em;
}
.icon-inverse {
color: #ffffff;
}
.icon-type:before {
content: "\e600";
}
.icon-box:before {
content: "\e601";
}
.icon-archive:before {
content: "\e602";
}
.icon-envelope:before {
content: "\e603";
}
.icon-email:before {
content: "\e604";
}
.icon-files:before {
content: "\e605";
}
.icon-printer2:before {
content: "\e606";
}
.icon-folder-add:before {
content: "\e607";
}
.icon-folder-settings:before {
content: "\e608";
}
.icon-folder-check:before {
content: "\e609";
}
.icon-wifi-low:before {
content: "\e60a";
}
.icon-wifi-mid:before {
content: "\e60b";
}
.icon-wifi-full:before {
content: "\e60c";
}
.icon-connection-empty:before {
content: "\e60d";
}
.icon-battery-full:before {
content: "\e60e";
}
.icon-settings:before {
content: "\e60f";
}
.icon-arrow-left:before {
content: "\e610";
}
.icon-arrow-up:before {
content: "\e611";
}
.icon-arrow-down:before {
content: "\e612";
}
.icon-arrow-right:before {
content: "\e613";
}
.icon-reload:before {
content: "\e614";
}
.icon-download:before {
content: "\e615";
}
.icon-tag:before {
content: "\e616";
}
.icon-trashcan:before {
content: "\e617";
}
.icon-search:before {
content: "\e618";
}
.icon-zoom-in:before {
content: "\e619";
}
.icon-zoom-out:before {
content: "\e61a";
}
.icon-chat:before {
content: "\e61b";
}
.icon-clock:before {
content: "\e61c";
}
.icon-printer:before {
content: "\e61d";
}
.icon-home:before {
content: "\e61e";
}
.icon-flag:before {
content: "\e61f";
}
.icon-meter:before {
content: "\e620";
}
.icon-switch:before {
content: "\e621";
}
.icon-forbidden:before {
content: "\e622";
}
.icon-phone-landscape:before {
content: "\e623";
}
.icon-tablet:before {
content: "\e624";
}
.icon-tablet-landscape:before {
content: "\e625";
}
.icon-laptop:before {
content: "\e626";
}
.icon-camera:before {
content: "\e627";
}
.icon-microwave-oven:before {
content: "\e628";
}
.icon-credit-cards:before {
content: "\e629";
}
.icon-map-marker:before {
content: "\e62a";
}
.icon-map:before {
content: "\e62b";
}
.icon-support:before {
content: "\e62c";
}
.icon-newspaper2:before {
content: "\e62d";
}
.icon-barbell:before {
content: "\e62e";
}
.icon-stopwatch:before {
content: "\e62f";
}
.icon-atom:before {
content: "\e630";
}
.icon-image:before {
content: "\e631";
}
.icon-cube:before {
content: "\e632";
}
.icon-bars:before {
content: "\e633";
}
.icon-chart:before {
content: "\e634";
}
.icon-pencil:before {
content: "\e635";
}
.icon-measure:before {
content: "\e636";
}
.icon-eyedropper:before {
content: "\e637";
}
.icon-file-settings:before {
content: "\e638";
}
.icon-file-add:before {
content: "\e639";
}
.icon-file:before {
content: "\e63a";
}
.icon-align-left:before {
content: "\e63b";
}
.icon-align-right:before {
content: "\e63c";
}
.icon-align-center:before {
content: "\e63d";
}
.icon-align-justify:before {
content: "\e63e";
}
.icon-file-broken:before {
content: "\e63f";
}
.icon-browser:before {
content: "\e640";
}
.icon-windows:before {
content: "\e641";
}
.icon-window:before {
content: "\e642";
}
.icon-folder:before {
content: "\e643";
}
.icon-connection-25:before {
content: "\e644";
}
.icon-connection-50:before {
content: "\e645";
}
.icon-connection-75:before {
content: "\e646";
}
.icon-connection-full:before {
content: "\e647";
}
.icon-list:before {
content: "\e648";
}
.icon-grid:before {
content: "\e649";
}
.icon-stack3:before {
content: "\e64a";
}
.icon-battery-charging:before {
content: "\e64b";
}
.icon-battery-empty:before {
content: "\e64c";
}
.icon-battery-25:before {
content: "\e64d";
}
.icon-battery-50:before {
content: "\e64e";
}
.icon-battery-75:before {
content: "\e64f";
}
.icon-refresh:before {
content: "\e650";
}
.icon-volume:before {
content: "\e651";
}
.icon-volume-increase:before {
content: "\e652";
}
.icon-volume-decrease:before {
content: "\e653";
}
.icon-mute:before {
content: "\e654";
}
.icon-microphone:before {
content: "\e655";
}
.icon-microphone-off:before {
content: "\e656";
}
.icon-book:before {
content: "\e657";
}
.icon-checkmark:before {
content: "\e658";
}
.icon-checkbox-checked:before {
content: "\e659";
}
.icon-checkbox:before {
content: "\e65a";
}
.icon-paperclip:before {
content: "\e65b";
}
.icon-chat-1:before {
content: "\e65c";
}
.icon-chat-2:before {
content: "\e65d";
}
.icon-chat-3:before {
content: "\e65e";
}
.icon-comment:before {
content: "\e65f";
}
.icon-calendar:before {
content: "\e660";
}
.icon-bookmark:before {
content: "\e661";
}
.icon-email2:before {
content: "\e662";
}
.icon-heart:before {
content: "\e663";
}
.icon-enter:before {
content: "\e664";
}
.icon-cloud:before {
content: "\e665";
}
.icon-book2:before {
content: "\e666";
}
.icon-star:before {
content: "\e667";
}
.icon-lock:before {
content: "\e668";
}
.icon-unlocked:before {
content: "\e669";
}
.icon-unlocked2:before {
content: "\e66a";
}
.icon-users:before {
content: "\e66b";
}
.icon-user:before {
content: "\e66c";
}
.icon-users2:before {
content: "\e66d";
}
.icon-user2:before {
content: "\e66e";
}
.icon-bullhorn:before {
content: "\e66f";
}
.icon-share:before {
content: "\e670";
}
.icon-screen:before {
content: "\e671";
}
.icon-phone:before {
content: "\e672";
}
.icon-phone-portrait:before {
content: "\e673";
}
.icon-calculator:before {
content: "\e674";
}
.icon-bag:before {
content: "\e675";
}
.icon-diamond:before {
content: "\e676";
}
.icon-drink:before {
content: "\e677";
}
.icon-shorts:before {
content: "\e678";
}
.icon-vcard:before {
content: "\e679";
}
.icon-sun:before {
content: "\e67a";
}
.icon-bill:before {
content: "\e67b";
}
.icon-coffee:before {
content: "\e67c";
}
.icon-tv2:before {
content: "\e67d";
}
.icon-newspaper:before {
content: "\e67e";
}
.icon-stack:before {
content: "\e67f";
}
.icon-syringe:before {
content: "\e680";
}
.icon-health:before {
content: "\e681";
}
.icon-bolt:before {
content: "\e682";
}
.icon-pill:before {
content: "\e683";
}
.icon-bones:before {
content: "\e684";
}
.icon-lab:before {
content: "\e685";
}
.icon-clipboard:before {
content: "\e686";
}
.icon-mug:before {
content: "\e687";
}
.icon-bucket:before {
content: "\e688";
}
.icon-select:before {
content: "\e689";
}
.icon-graph:before {
content: "\e68a";
}
.icon-crop:before {
content: "\e68b";
}
.icon-heart2:before {
content: "\e68c";
}
.icon-cloud2:before {
content: "\e68d";
}
.icon-star2:before {
content: "\e68e";
}
.icon-pen:before {
content: "\e68f";
}
.icon-diamond2:before {
content: "\e690";
}
.icon-display:before {
content: "\e691";
}
.icon-paperplane:before {
content: "\e692";
}
.icon-params:before {
content: "\e693";
}
.icon-banknote:before {
content: "\e694";
}
.icon-vynil:before {
content: "\e695";
}
.icon-truck:before {
content: "\e696";
}
.icon-world:before {
content: "\e697";
}
.icon-tv:before {
content: "\e698";
}
.icon-sound:before {
content: "\e699";
}
.icon-video:before {
content: "\e69a";
}
.icon-trash:before {
content: "\e69b";
}
.icon-user3:before {
content: "\e69c";
}
.icon-key:before {
content: "\e69d";
}
.icon-search2:before {
content: "\e69e";
}
.icon-settings2:before {
content: "\e69f";
}
.icon-camera2:before {
content: "\e6a0";
}
.icon-tag2:before {
content: "\e6a1";
}
.icon-lock2:before {
content: "\e6a2";
}
.icon-bulb:before {
content: "\e6a3";
}
.icon-location:before {
content: "\e6a4";
}
.icon-eye:before {
content: "\e6a5";
}
.icon-bubble:before {
content: "\e6a6";
}
.icon-stack2:before {
content: "\e6a7";
}
.icon-cup:before {
content: "\e6a8";
}
.icon-phone2:before {
content: "\e6a9";
}
.icon-news:before {
content: "\e6aa";
}
.icon-mail:before {
content: "\e6ab";
}
.icon-like:before {
content: "\e6ac";
}
.icon-photo:before {
content: "\e6ad";
}
.icon-note:before {
content: "\e6ae";
}
.icon-clock2:before {
content: "\e6af";
}
.icon-data:before {
content: "\e6b0";
}
.icon-music:before {
content: "\e6b1";
}
.icon-megaphone:before {
content: "\e6b2";
}
.icon-study:before {
content: "\e6b3";
}
.icon-lab2:before {
content: "\e6b4";
}
.icon-food:before {
content: "\e6b5";
}
.icon-t-shirt:before {
content: "\e6b6";
}
以及更多
答案 0 :(得分：0)
随机CSS开始工作。我不确定为什么，但很高兴它现在正在工作。也许某处有拼写错误？
感谢您的帮助。