CSS внутренние ссылки не относятся к CSS-файлу? - PullRequest
Новая
       9

CSS внутренние ссылки не относятся к CSS-файлу?

0 голосов
/ 21 сентября 2018

Должно быть, я что-то упустил, внутренние ссылки на css относительно файла css?поиск и каждый источник пока говорит да, но мой файл не хочет загружать шрифты (fontawesome).Файл index.html загружает и отображает шрифты полностью, поэтому я знаю, что он работает;однако страница myfile.html, которая загружает родственник css, не работает.Для того, чтобы myfile.html работал, я должен изменить файл css для загрузки относительно страницы myfile.html (или так кажется), поэтому ../fonts/, но тогда это нарушает страницу index.html.

Из-за того, как все устроено и сделано, я должен держать все относительно, или я бы просто использовал /fonts/, но на данный момент это не вариант.

Также, чтобы сократить его, я просто перечисляючасти fontawesome, необходимые для перечисленного примера

, возможно, упускают что-то простое, но все ссылки, которые я поднимаю, говорят, что они должны загружаться относительно файла .css.

здесь структура папок / файлов 

- home
    - inc
            myfile.html
    - fontawesome
            fontawesome.min.css
            - fonts
    index.html

---- index.html ---- 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="fontawesome/fontawesome.min.css" rel="stylesheet" type="text/css">
    <title>Home Page</title>
</head>
<body>
    <div><i class="fas fa-bars"></i> fun stuff here</div>
</body>
</html>

---- myfile.html ---- 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../fontawesome/fontawesome.min.css" rel="stylesheet" type="text/css">
    <title>myfile</title>
</head>
<body>
    <div><i class="fas fa-bars"></i> fun stuff here</div>
</body>
</html>

-- fontawesome.min.css ---- 

.fa,.fab,.fal,.far,.fas{
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    text-rendering:auto;
    line-height:1
}
.fas.fa-pull-left{
    margin-right:.3em
}
.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{
    margin-left:.3em
}

@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:400;
    src:url(fonts/fa-regular-400.eot);
    src:url(fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
            url(fonts/fa-regular-400.woff2) format("woff2"),
            url(fonts/fa-regular-400.woff) format("woff"),
            url(fonts/fa-regular-400.ttf) format("truetype"),
            url(fonts/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:900;
    src:url(fonts/fa-solid-900.eot);
    src:url(fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
            url(fonts/fa-solid-900.woff2) format("woff2"),
            url(fonts/fa-solid-900.woff) format("woff"),
            url(fonts/fa-solid-900.ttf) format("truetype"),
            url(fonts/fa-solid-900.svg#fontawesome) format("svg")}

.fa,.far,.fas{
    font-family:"Font Awesome 5 Free"
}
.fa,.fas{
    font-weight:900
}

1 Ответ

0 голосов
/ 21 сентября 2018

Я просто стреляю из бедра в этот момент.:-) Попробуйте отредактировать пути в вашем fontawesome.min.css.Просто добавьте ../ к каждому URL так: 

@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:400;
    src:url(../fonts/fa-regular-400.eot);
    src:url(../fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
            url(../fonts/fa-regular-400.woff2) format("woff2"),
            url(../fonts/fa-regular-400.woff) format("woff"),
            url(../fonts/fa-regular-400.ttf) format("truetype"),
            url(../fonts/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:900;
    src:url(../fonts/fa-solid-900.eot);
    src:url(../fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
            url(../fonts/fa-solid-900.woff2) format("woff2"),
            url(../fonts/fa-solid-900.woff) format("woff"),
            url(../fonts/fa-solid-900.ttf) format("truetype"),
            url(../fonts/fa-solid-900.svg#fontawesome) format("svg")}
...