it-swarm.com.ru

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

Мой клиентский проект использует некоторые базовые HTML и CSS. Но им нравятся глифы в меню веб-сайта. Так что я просто попытался включить Glyphicons с помощью Bootstrap CSS, но это произошло, но другие CSS-файлы оказались затронуты после включения Bootstrap CSS. 

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

Это возможно в первую очередь? Я знаю, что бесплатные глифы будут доступны в пакете Bootstrap. 

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

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

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

16
Raja

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

Проверьте этот репозиторий GitHub https://github.com/ohpyupi/glyphicons-only-bootstrap

или же

bower install glyphicons-only-bootstrap

ПРАВКА

Теперь можно скачать пакет через NPM.

npm install glyphicons-only-bootstrap
6
supergentle

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

  1. Скачать Font Awesome package;

  2. Скопируйте font-awesome.min.css в свою папку css и все файлы шрифтов из папки Font Awesome в папке fonts;

  3. Включите <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> в <head> вашего HTML;

  4. Выберите значки из icon library и вставьте их в свое приложение так же, как и глиционы Bootstrap.

12
Arthur Tarasov

Там это:

<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>

Вы можете увидеть пример в демо здесь (пункты меню «Глаз Медузы» и «Огненный дождь»).

9
thdoan

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

Правка: В этой теме больше информации об этом: Bootstrap 3 Glyphicons CDN

1
Alejandro Garrido

перейдите на страницу описания глифов [ https://glyphicons.bootstrapcheatsheets.com/]

li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}
0
Naved Khan

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

Так что я перешел на FontAwesome, работал прекрасно!

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

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

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

0
George