2013-11-24 2 views
0

Так что моя точная проблема связана с тем, что я не могу сделать значок вектора для одного из моих значков. У меня есть этот значок как файл изображения, но если я попытаюсь его преобразовать, используя растровое векторное изображение, это выглядит ужасно. Поскольку я не могу сделать это векторным svg-файлом, я не могу включить это как часть удивительного шрифта.Как отображать только определенный значок из моего предопределенного изображения png при использовании шрифта, удивительного для других шрифтов

Теперь моя настоящая проблема. значок получает отображается с помощью директивы

<i class="icon-{variable name}"></i> 

Эта переменная часть изменяется на ответ от моего API. Для всех других значков он будет работать. Однако по очевидным причинам для значка, который я хочу, он не найдет его в удивительном шрифте. поэтому, когда он сталкивается с «значок-обычай» Я хочу, чтобы CSS в удивительном шрифт, который обычно показывает что-то вроде

.icon-wap:before { 
    content: "\f102"; 
} 

к точке и загрузить конкретный файл .png (мой значок).

Возможно ли это с помощью css? Я знал, что есть способ использовать переменные.less в бутстрап-спрайтах для загрузки пользовательского глифа. но, похоже, сейчас это невозможно. Так я могу это сделать?

+0

Будет здорово, если вы можете добавить jsfiddle для этого. –

+0

Я пытался создать jsfiddle. Я заметил, что соглашение '.icon- *' используется в FontAwesome, интегрированном в Bootstrap 2.3.2. Если в 2.3.2 он не использует ': before' для отображения значка. Он скорее использует спрайт изображения. В Bootstrap 3.0.2 используется '.glyphicon.gyphicon- *'. В то время как FontAwesome при использовании сам по себе, следует за соглашением .fa.fa- .fa- . Последние два используют ': before' для отображения значков. Итак, я не понимаю, что вы используете. –

+0

@MiteshAshar Я на самом деле пытаюсь использовать FontAwesome самостоятельно (используя некоторые из значков в нем, которые не используются). Я создаю это в среде бутстрапа. Вот почему это было моим последним прибежищем, что, если возможно, я буду использовать это, чтобы переопределить этот значок. Итак, css, я имею в виду, это FontAwesome css, который перенаправляет меня на шрифты/значки. Я хотел бы иметь способ для конкретного «значка-что-то» загрузить конкретный png (значок) вместо шрифта, который он обычно загружает. Если все еще не ясно, я постараюсь сделать из него jsfiddle! –

ответ

0

Сначала вам нужно упаковать свой значок в файл шрифта так же, как и с помощью шрифта. Ваш значок должен быть в векторном формате.

Font Custom - это инструмент для преобразования SVG-изображений в собственный набор значков шрифтов. Для этого требуется пару пакетов для установки с пива или apt-get (только для Mac и Linux), а затем для создания каталога и создания шрифта.

Смежные вопросы