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

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

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

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

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

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

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

12
css glyphicons html twitter-bootstrap twitter-bootstrap-3

6 ответов

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

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

или

bower install glyphicons-only-bootstrap

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

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

npm install glyphicons-only-bootstrap
4

Я пытался сделать технологии 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.

11

вот это:

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

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

8

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

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

1

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

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

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

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

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

0

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

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