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

мой клиентский проект с использованием некоторых базовых HTML и CSS. Но они вроде технологии glyphicons на меню сайта. Поэтому я просто попытался включить Глификоны с загрузочным CSS, это так, но другой css пострадал после включения загрузочного CSS.

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

Это возможно в первую очередь? Я знаю, что Glyphicons free будет доступен с пакетом Bootstrap.

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

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

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

6 ответов


вот Bower-пакет, который можно использовать только технологии glyphicons из всей загрузки.

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

или

bower install glyphicons-only-bootstrap

редактировать

теперь можно загрузить пакет через NPM.

npm install glyphicons-only-bootstrap

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

  1. скачать шрифт удивительный пакет;

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

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

  4. выберите значки из библиотека и ставим их в ваше приложение так, как вы бы Бутстрап по технологии glyphicons.


вот это:

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

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


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

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


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

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

вы также можете получить CDN, который выглядит так:

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

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


перейти к технологии glyphicons шпаргалка [https://glyphicons.bootstrapcheatsheets.com/]

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