Используя Ремешок ботинка Твиттера glyphicons в CSS

Я хотел бы добавить, что Твиттер улучшает glyphicon, чтобы заменить ссылку изображения в файле CSS ниже хотя не уверенный как.

.edit-button {
  background: url('../img/edit.png') no-repeat;
  width: 16px;
  height: 16px;
}

В HTML я добавил бы его следующим образом:


Какие-либо идеи?

обновление - попробовало следующее, хотя оно только показывает ширину и высоту в поджигателе Firefox:

.edit-button
{
  /* background: url('../img/edit.png') no-repeat; */
  background: url(../img/glyphicons-halflings.png) no repeat -96px -72px !important;
  width: 16px;
  height: 16px;
}

не уверенный, почему это не берется?

21
nl ja de
Улучшить 2 права?
добавлено автор Ilan Biala, источник
Это работает над моей машиной. Удостоверьтесь, что путь правилен
добавлено автор Tepken Vannkorn, источник

2 ответы

Мне нравится использовать: после или: перед методом...

HTML

Click Here</div>

CSS

.arrow:after {
  font-family: "Glyphicons Halflings";
  content: "\e080";
}

This should work assuming you have the glyphicon fonts (they come free with Bootstrap)

107
добавлено
Here' s a cheatsheet со всеми предприятиями Glyphicon (для содержание: "" часть):
добавлено автор aesede, источник
На вышеупомянутом cheatsheet страница можно пойти в пульт и управлять этим: $ (' промежуток [данные-unicode] ') .each (функция (k, v) {console.log (k + ' ' + $ (v) .attr (' class') + ' ' + $ (v) .data (' unicode'))}); , чтобы получить список имен глифа и его предприятия
добавлено автор aesede, источник
+1, Прекрасный ответ на вопрос OPs
добавлено автор Fizzix, источник
Чтобы получить код символа, можно открыть докторов Ремешка ботинка с glyphicons в браузере и осмотреть его с инструментами разработчика.
добавлено автор counterbeing, источник
Это должно быть отмечено как ответ. Это работает очень хорошо.
добавлено автор Cody, источник

So why don't you use tag for your edit button? Try this:

<button type="submit" name="edit" class="edit-button btn btn-primary">
   
   Edit
</button>
3
добавлено
- 1 Редактируют/устраняют ответ, чтобы ответить на вопрос OP. Он спросил, как добавить символ через css. Я вижу комментарии, но большинство людей не читает комментарии.
добавлено автор M H, источник
Плакат спросил, как сделать это с CSS. Вы полностью упустили суть. И I' m, не пытаясь быть отрицательным, но как ваш ответ становился отмеченным как правильный?
добавлено автор Pegues, источник
Хорошее дополнительное предложение, но doesn' t отвечают на вопрос. Мой активируемый по щелчку объект - заголовок таблицы и я don' t хотят приложить символ там и изменить его, когда мне нужно изображение, чтобы измениться.
добавлено автор Jage, источник
используйте этот фон: URL (glyphicons-halflings.png) никакое повторение-96px-72px! важный; , поскольку это - изображение эльфа так, чтобы вы определили, которые помещают изображение.
добавлено автор Tepken Vannkorn, источник
Привет спасибо за ваш ответ. Хотя I' d нравится знать если it' s возможный обновить CSS я включал выше, чтобы показать glyphicon вместо изображения. Если это - возможный I' d нравится знать как:)
добавлено автор user1746582, источник
спасибо за это. Я внес изменение, которое вы предложили, и в поджигателе это не появляется. В браузере это похоже на пустую серую небольшую коробку:0? просто обновленный мой пост происхождения...
добавлено автор user1746582, источник
Привет попробованный еще раз с незначительным обновлением следующим образом: фон: URL ('../img/glyphicons-halflings.png')-96px без повторений-72px! важный; просто должен был добавить одинарные кавычки вокруг названия картинки и дефиса в ' никакой repeat\U 0026\\U 0023\39;. +1 для вашей помощи и быстрого ответа:)
добавлено автор user1746582, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)