Как включить Glyphicons без использования Bootstrap CSS

Мой проект клиента с использованием некоторых базовых HTML и CSS. Но им нравятся Глификоны в меню Веб-сайта. Поэтому я просто попытался включить Glyphicons с Bootstrap CSS, но так же, как и CSS-код Bootstrap.Как включить Glyphicons без использования Bootstrap CSS

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

Возможно ли это первым? Я знаю, что бесплатные Glyphicons будут доступны с пакетом Bootstrap.

Иными словами, мой клиент не хочет, чтобы я включил Bootstrap CSS, поскольку он влияет на структуру страницы.

Так можно ли включать глификон без Bootstrap css или собственный собственный CSS?

Любая помощь будет оценена!

источник

2016-05-25 Raja

Альтернатива; 'Font Awesone' – HddnTHA

Вам нужно будет купить PRO-версию, если вы хотите использовать ее без бутстрапа. –

Определенно переключитесь на http://fontawesome.io –

Вот становой пакет, который вы можете использовать только глификонов из всего бутстрапа.

Проверить это GitHub хранилище https://github.com/ohpyupi/glyphicons-only-bootstrap

или

bower install glyphicons-only-bootstrap

EDIT

Теперь можно загрузить пакет через НПМ.

npm install glyphicons-only-bootstrap

источник

2016-09-06 16:49:51 supergentle

Так как сегодня я уже опубликовал прощальный комментарий (см. Выше): Люди, которые опросили ответы, не оставляя комментариев, объясняя, почему должно быть запрещено использование Stack Exchange! Что случилось, когда они попытались следовать этому совету? Или они неосведомленно или бесцеремонно сократили его, потому что они не используют Бауэра? –

Есть много людей, которых обманывает что-то только из-за его причудливости и насколько оно изощренно. Я полностью согласен с тобой. Становится все сложнее задавать вопросы и оставлять ответ в потоке стека. Я просто рад, что около 400 человек посещают репо за две недели и получают то, что хотят для ежедневного развития. – supergentle

Да, вам нужно только скачать с этой страницы: http://glyphicons.com/ (Free вариант ниже)

EDIT: В этой теме подробнее об этом: Bootstrap 3 Glyphicons CDN

источник

2016-05-25 22:04:55

Да. Но в бесплатной версии нет опции css, доступно только png. Для версии CSS снова нужно перейти на версию Pro или Bootstrap. Благодарю. – Raja

И невозможно взять файлы css и шрифтов из бутстрапа и использовать только это? Я не уверен в жизнеспособности этого, но это идея. Или вы можете попробовать использовать шрифт Awesome, как сказал вам HdddnTHA –

Я пытался получить glyphicons Bootstrap, чтобы работать без установки файла целиком bootstrap.css, но на полпути через это стало слишком много работы, и я сдался. Вместо этого я наткнулся на Font Awesome. Bootstrap 3 сам использует его (или используется для использования). Он предназначен для использования как автономный, поэтому он очень прост и легковес. Все, что вам нужно сделать, это:

Download шрифта Удивительный пакет;
Скопируйте font-awesome.min.css в свою папку css и все файлы шрифтов из папки шрифтов Font Awesome в папку шрифтов;
Включите <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> в <head> вашего HTML;
Выберите значки из icon library и поместите их в свое приложение так же, как и глификоны Bootstrap.

источник

2016-09-11 12:43:36

Спасибо, это помогло! – jhell

Возможно, я что-то делаю, но я не вижу, как это может работать. FontAwesome использует разные классы, поэтому, если вы используете библиотеку, которая ожидает классы GlyphIcon, например. '', ничего не появится. Мне нравится использовать FontAwesome, но, к сожалению, сторонняя библиотека, которую я хочу использовать, ожидает GlyphIcons, даже версию, отличную от Bootstrap. (Возможно, это надзор над автором библиотеки, но я пытаюсь обойти это.) –

Там это:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

Однако, если вы хотите сохранить некоторую полосу пропускания, вы можете загрузить шрифты непосредственно из CDN, а затем встраивать необходимый CSS, например:

<style> 
@font-face { 
    font-family: 'Glyphicons Halflings'; 
    src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot'); 
    src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
} 
.glyphicon { 
    position: relative; 
    top: 1px; 
    display: inline-block; 
    font: normal normal 16px/1 'Glyphicons Halflings'; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    margin-right: 4px; 
} 
/* Add icons you will be using below */ 
.glyphicon-fire:before { 
    content: '\e104'; 
} 
.glyphicon-eye-open:before { 
    content: '\e105'; 
} 
</style>

Вы можете увидеть пример в пунктах меню demo here (пункты «Око Медузы» и «Дождь огня»).

источник

2017-03-02 10:37:10 10basetom

To downvoter: просьба предоставить конструктивную обратную связь, если это решение не работает для вас. – 10basetom

Это был не я, который вас ниспровергал, и я действительно ненавижу людей, которые спускаются вниз, не оставляя причин, тоже - сайт даже говорит оставить комментарий! Но ваша ссылка CDN по-прежнему наполняет стандартный CSS (хотя он утверждает, что «нормализует» его), поэтому у него есть по существу та же проблема, что и Bootstrap, и, следовательно, на самом деле не отвечает на вопрос. Однако явный CSS, который вы разместили здесь, не имеет этой проблемы, и именно поэтому я проголосовал за ваш ответ - спасибо! Однако я не согласен с тем, что он экономит полосу пропускания. Вся суть CDN заключается в том, что браузеры кэшируют библиотеки и снимают загрузку с вашего веб-сервера. –

@MichaelScheper благодарит за комментарий. Это было довольно давно, но я думаю, что когда я сказал «сохранить некоторую пропускную способность», я имел в виду вместо загрузки всей библиотеки Bootstrap только для использования шрифтов значков, они могут просто ссылаться непосредственно на шрифты. – 10basetom

У меня была такая же проблема с Bootstraps, мне просто нужна стрела, но испортите ее, добавив ее.

Итак, я переехал в FontAwesome, работал красиво!

Вы также можете получить CDN, который выглядит следующим образом:

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

Вы должны получить свой собственный! :)

источник

2017-06-11 08:35:56 George

Это тот же ответ, что и Артур. https://stackoverflow.com/a/39436226/1450294 Спасибо за ваш совет, но, пожалуйста, посмотрите мой комментарий там, почему я не думаю, что это полезно. (Я не буду ниспровергать вас и забирать вашу точку репутации. Я рекомендую вам прочитать другие ответы, прежде чем писать свои собственные, и знакомиться с таможней StackExchange.) –

Как включить Glyphicons без использования Bootstrap CSS

ответ

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