Используйте ‹glyph› в качестве фонового изображения, взятого из одного SVG.

Я знаю, что могу использовать один файл SVG для каждого значка, а затем использовать его как background-image с:

.my-button {
    background-image: url(binaries/icons/my-icon.svg);
}

or

что я могу определить глифы с помощью значения unicode, а затем добавить его в свои стили, полагаясь на content, примененный в псевдоэлементе : after /: before, например :

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <font id="fontello" horiz-adv-x="1000" >
            <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
            <missing-glyph horiz-adv-x="1000" />
            <glyph glyph-name="my-icon unicode="&#xe800;" d="m564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
            <glyph glyph-name="up-open" unicode="&#xe805;" d="m564 280q16-16 16-41t-16-41q-38-38-78 0l-196 188-196-188q-40-38-78 0-16 16-16 41t16 41l234 224q16 16 40 16t40-16z" horiz-adv-x="580" />
        </font>
    </defs>
</svg>

а затем иметь базовый класс плюс класс-декоратор для конкретного значка, например:

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    ...
}

.glyphicon__my-iconn:before {
    content: "\e800";
}

Но

Мне было интересно, можно ли напрямую ссылаться на глиф в одном файле SVG, возможно, с абсолютным / относительным путем, и использовать его как URL-адрес фонового изображения () без определения дополнительного класса но просто применяя стиль к желаемому (в данном случае my-button). Что-то вроде (просто пример, я не знаю, какой должен быть правильный формат URI):

.my-button {
    background-image: url(binaries/icons/my-fontello-font.svg?font=fontello#my-icon
}

Это было бы идеально для:

  • иметь только один HTTP-запрос при загрузке иконок
  • пропустить определение одного класса для каждого значка (что, если у меня 200 значков ??) и просто использовать их

Есть ли способ сделать это?


svg icons css background-image glyphicons
person Kamafeather    schedule 03.08.2015    source источник
comment
Вы пробовали это? css-tricks.com/svg-sprites-use-better-icon -fonts   -  person Keyamoon    schedule 27.09.2015

Ответы (1)


arrow_upward
1
arrow_downward

Я кратко покопался в теме (искал и нашел этот вопрос). Из того, что я узнал, может быть способ сделать это, но он не поддерживает браузер.

Я думаю о небольшом парсере (вроде простой задачи ворчания), который будет преобразовывать глифы в представления и пути, а затем использовать их, как описано здесь: https://css-tricks.com/svg-fragment-identifiers-work (метод фонового изображения).

Надеюсь, это может вас куда-то направить. Я, вероятно, раскопаю эту тему немного дальше, но пока это только кажется возможным (так что не в каждом браузере).

person Dracco    schedule 21.09.2015
comment
Ты прав. Я тоже нашел этот способ, и, даже если он имеет преимущества (крупные компании используют его), мне лично этот подход не очень понравился. В конце концов я сдался, чтобы создать несколько классов или поиграть с каким-нибудь умным миксином SCSS. А я просто передаю имя значка, определенное в SVG, в свой миксин (так что никаких неясных объектов HTML или символов, которые меняются от выпуска к выпуску моего набора значков SVG). На данный момент это справедливое решение, которое соответствует моим потребностям (что-то быстро обслуживаемое, с поддержкой цветных значков CSS). Но я надеюсь на дальнейшую поддержку способа запроса одного глифа в файле SVG-XML. - person Kamafeather; 21.09.2015