Как использовать Bootstrap Glyphicons в изображениях Holder.js

Я создаю интерфейс проекта с помощью Bootstrap и хочу использовать Glyphicons найдено в 3.0.0 вместо обычного текста. Как бы я это сделал?

Те из вас, кто знаком с Holder.js, знают, что JS в основном создает изображения-заполнители на клиенте. сторона. Это имеет полезные приложения для экономии полосы пропускания, так как вам нужно только загрузить сценарий (около 4 КБ) и позволить машине клиента генерировать изображения.

Я хочу объединить Glyphicons сholder.js, чтобы на лету создавать большие высококачественные значки.

Вызов Glyphicon с помощью Bootstrap выполняется следующим образом:

<span class="glyphicon glyphicon-user"></span>

Вызов динамического изображения с текстом «Hello World» с помощьюholder.js делается следующим образом:

<img data-src="holder.js/200x200/text:Hello World">

Я понимаю, что Bootstrap CSS определяет класс Glyphicon как шрифт, а затем использует псевдо-элемент перед для вызова определенного символа, определенного вторичным классом. Смотри ниже:

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.glyphicon-user:before {
    content: "\e008";
}

Как легко передать определенный символ глификон в правильном шрифте вholder.js для вывода значка изображения?


javascript css twitter-bootstrap glyphicons holder.js
person Samuel Hawksby-Robinson    schedule 08.10.2013    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Хорошо, так что это никого не заинтересовало. Но я решил проблему для себя, посчитал хорошим тоном поделиться своим решением с сообществом.

Я должен был сделать две вещи. После того, как я понял, чтоholder.js анализирует отрисовку холста JavaScript в файл изображения png, проблема была не столько в проблеме с «holder.js», сколько в чистом JS и веб-шрифте/шрифте.

Первое: мне нужно было явно указать системе, что глификоны — это шрифты, и что я имел в виду под ними. Я сделал это с помощью следующего CSS:

@font-face {
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
        }

Во-вторых: как только браузер узнал имя, местоположение и тип шрифта, который я использовал, я мог начать использовать его для передачи символов Юникода в объект холста JS. В Holder.js есть настройки Var, которые содержат массив «тем», я добавил в массив следующую пользовательскую тему:

"blueGlyph": {
        background: "#3a87ad",
        foreground: "#ffffff",
        size: 128,
        font:"Glyphicons Halflings"
    }

Третье: теперь все, что мне нужно было сделать, это передать символ Юникода в сценарий JS, и он на лету создавал изображения значков. HTML выглядел следующим образом:

<img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph">

Что произвело следующее динамически созданное изображение:

введите здесь описание изображения

Ключом к выбору и передаче символа Юникода в правильном формате для его интерпретации и рисования является передача символа Юникода с использованием метода HTML. т.е. &#x*{ЮНИКОД ЗДЕСЬ}*; . Или " ;" согласно приведенному выше примеру.

Вот скрипка, если хотите с ней повозиться.

person Samuel Hawksby-Robinson    schedule 09.10.2013
comment
Это отлично, я постараюсь сделать это частью держателя по умолчанию. - person imsky; 15.10.2013
comment
Сам мистер @imsky, с удовольствием. Я рад, что тебе нравится. Я хочу, чтобы изображения были сглажены, на некоторых изображениях есть очень заметная пикселизация по краям символов. Вот скрипка - person Samuel Hawksby-Robinson; 16.10.2013
comment
Для меня это выглядит как прямоугольник (отсутствует символ), я думаю, вам нужно будет где-то разместить пример самостоятельно. - person imsky; 18.10.2013
comment
@Samyoul, это решение не работает. Можете ли вы привести нам другой пример, который работает? - person wpsidi; 18.07.2014

arrow_upward
2
arrow_downward

Я искал в сети, но не нашел решения. Как сказал Имски, это выглядит как «прямоугольник» (отсутствует символ). Поэтому я попытался создать свое собственное решение, но это не создание изображения с помощьюholder.js.

<div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
       <span class="big-icon glyphicon glyphicon-glass"></span>
   </a>
</div>

а затем в стиле css:

<style>
.big-icon{
   margin:10px;
   font-size:100px;
}
.thumbnail{
   text-align:center;
}
</style>

Вот результат:
введите здесь описание изображения


Но я все еще ищу решение: как использовать Bootstrap Glyphicons в изображениях Holder.js. Любая помощь будет оценена.

Спасибо

person wpsidi    schedule 18.07.2014
comment
Средство визуализации SVG Холдера требует дополнительной работы для отображения веб-шрифтов. Версия 2.4 будет иметь полную поддержку веб-шрифтов, см. этот выпуск: github.com/imsky/holder/issues. /73 - person imsky; 01.08.2014

arrow_upward
-1
arrow_downward

Но почему вы так запутались, когда решение уже доступно. Просто удалите все изменения, связанные с держателем.js, и вернитесь к основам, просто поместите эту строку в конец документа и посмотрите изменения......

 $(function() {
        $('img').each(function() {
            var img = $(this);
            img.error(function() {
                img.replaceWith('<span class="glyphicon glyphicon-user" style=" background-color: #eee;  font-size: 100pt"></span>');
            });
        });
    });

если вам нужна дополнительная помощь, можете написать мне по адресу [email protected]

person Ranjeet Rana    schedule 20.12.2014