Доступные символы

Содержание

Why it’s important to respect brand guidelines

First thing you have to keep in mind is that logos are intellectual property of their owners and they have the right to control how and when their logo will be displayed.


So, if you’d want to be 100 % correct, you’d have to (for most of the brands):

  1. have the permission to use the logo itself, mostly needed in writing, signed by the legal brand owner
  2. follow brands guidelines and use only unmodified versions of each logo, without any effects or changes in their visual appearance
  3. last but not least, pay attention to whether you use the logo in an appropriate context

It may seem too complicated, but that’s how things are. When you decide to ignore it, it may happen that brand owners can decide to sue you for violating their brand rights.

Just imagine, if you’d have a unique logo for your own product (maybe you already have it) and somebody start using it wrong — in a context you do not like and even recklessly alter its shape and look to fit his own requirements, it wouldn’t feel good, am I right?

Each brand has a number of custom rules, which you can’t ignore, but here we will try to cover those, that are common to most of them.

HTML5 [hidden] attribute

HTML5 adds a new global attribute named , which is styled as by default. Borrowing an idea from PureCSS, we improve upon this default by making to help prevent its from getting accidentally overridden. While isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

jQuery incompatibility

is not compatible with jQuery’s and methods. Therefore, we don’t currently especially endorse over other techniques for managing the of elements.

To merely toggle the visibility of an element, meaning its is not modified and the element can still affect the flow of the document, use the class instead.

Font Awesome 5

Font Awesome 5 IntroIcons AccessibilityIcons AlertIcons AnimalsIcons ArrowsIcons Audio & VideoIcons AutomotiveIcons AutumnIcons BeverageIcons BrandsIcons BuildingsIcons BusinessIcons CampingIcons CharityIcons ChatIcons ChessIcons ChildhoodIcons ClothingIcons CodeIcons CommunicationIcons ComputersIcons ConstructionIcons CurrencyIcons Date & TimeIcons DesignIcons EditorsIcons EducationIcons EmojiIcons EnergyIcons FilesIcons FinanceIcons FitnessIcons FoodIcons Fruits & VegetablesIcons GamesIcons GendersIcons HalloweenIcons HandsIcons HealthIcons HolidayIcons HotelIcons HouseholdIcons ImagesIcons InterfacesIcons LogisticsIcons MapsIcons MaritimeIcons MarketingIcons MathematicsIcons MedicalIcons MovingIcons MusicIcons ObjectsIcons Payment & ShoppingIcons PharmacyIcons PoliticalIcons ReligionIcons ScienceIcons Science FictionIcons SecurityIcons ShapesIcons ShoppingIcons SocialIcons SpinnersIcons SportsIcons SpringIcons StatusIcons SummerIcons Tabletop GamingIcons ToggleIcons TravelIcons Users & PeopleIcons VehiclesIcons WeatherIcons WinterIcons Writing

Z-index

Several Bootstrap components utilize , the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used + or +.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit values of , , and for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher value to show their border over the sibling elements.

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with three different containers:

  • , which sets a at each responsive breakpoint
  • , which is at all breakpoints
  • , which is until the specified breakpoint

The table below illustrates how each container’s compares to the original and across each breakpoint.

See them in action and compare them in our .

Extra small<576px Small≥576px Medium≥768px Large≥992px Extra large≥1200px
100% 540px 720px 960px 1140px
100% 540px 720px 960px 1140px
100% 100% 720px 960px 1140px
100% 100% 100% 960px 1140px
100% 100% 100% 100% 1140px
100% 100% 100% 100% 100%

Responsive

Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply s for each of the higher breakpoints. For example, is 100% wide to start until the breakpoint is reached, where it will scale up with , , and .

PRO, ALL and FREE bundles discontinued

Until the last update, there were always three bundles (versions) of GLYPHICONS icons:

  • GLYPHICONS PRO (multiple sets, vector source files, fonts, web files and raster images and free updates)
  • GLYPHICONS ALL (multiple sets, but it contained only raster images for iOS)
  • GLYPHICONS FREE (it contained only small raster images and limited free license)

There were multiple licenses, as PRO and ALL versions had the same commercial license and FREE version was released under the Creative Commons Attribution 3.0 Unported (CC BY 3.0).

A few years ago, when creators of Twitter Bootstrap contacted me about licensing, I decided to give them Halflings set rather for free, because on the one hand I liked the original project and hadn’t time to negotiate any custom license on the other. So to make things a little more complicated, this older version of Halflings set was released under the same license as Bootstrap. The result was that licenses became a bit mess and many customers were unsure if it was ok to use them in their projects.

At that time, I probably should to hire somebody to create a more robust license, but right when I was about to do so, somebody shamelessly copied almost all Halflings icons and started to offer them as his own product. So instead of a new license, I took money I had and started to register GLYPHICONS and related graphics as a trademark to protect my work. This process took years and I’m still not sure it was worth it, I guess only time will show.

Anyway, the result is, that my license text remained almost unchanged till today, which in the end wasn’t a bad thing, because today I can confirm, that almost all my customers don’t have any problems with this license and on the contrary, they appreciate its brevity, straightforwardness and clarity.

So in version 2.0, there are no bundles (versions) of sets as each icon set is now a standalone product, has its own page, own update history, own price and one simple license.

Glyphicons

Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.


Use glyphicons in text, buttons, toolbars, navigation, or forms:

Bootstrap Glyph Example

<p>Envelope icon: <span class=»glyphicon glyphicon-envelope»></span></p> <p>Search icon: <span class=»glyphicon glyphicon-search»></span></p> <p>Print icon: <span class=»glyphicon glyphicon-print»></span></p>

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the and classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .

col col col col col-8 col-4

Stacked to horizontal

Using a single set of classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint ().

col-sm-8 col-sm-4 col-sm col-sm col-sm

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-md-8 .col-6 .col-md-4

.col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4

.col-6 .col-6

Gutters

Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the and matching padding utilities on the s. The or parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.

Here’s an example of customizing the Bootstrap grid at the large () breakpoint and above. We’ve increased the padding with , counteracted that with on the parent and then adjusted the wrapper with .

Custom column padding Custom column padding

Row columns

Use the responsive classes to quickly set the number of columns that best render your content and layout. Whereas normal classes apply to the individual columns (e.g., ), the row columns classes are set on the parent as a shortcut.

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

Column Column Column Column

Column Column Column Column

Column Column Column Column

Column Column Column Column

Column Column Column Column

You can also use the accompanying Sass mixin, :

Page defaults

The and elements are updated to provide better page-wide defaults. More specifically:

  • The is globally set on every element—including and , to . This ensures that the declared width of element is never exceeded due to padding or border.
  • No base is declared on the , but is assumed (the browser default). is applied on the for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
  • The also sets a global , , and . This is inherited later by some form elements to prevent font inconsistencies.
  • For safety, the has a declared , defaulting to .

Как использовать стандартные иконки в Bootstrap 3?

Добавление иконки Bootstrap на веб-страницу обычно осуществляется с помощью элемента или , к которому необходимо добавить базовый класс и класс определённой иконки (например, иконки телефона — ).

<!-- Глификонка телефона -->
<!-- 1. С помощью элемента span -->
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
<!-- 2. С помощью элемента i -->
<i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>

Стилизация иконок в Bootstrap 3

Оформление иконок Glyphicons Halflings осуществляется также как и стилизация обычного текста.

Например, для того чтобы изменить цвет иконки, ей необходимо просто задать CSS-свойство .

<!-- Иконка "Стрелочка влево" (glyphicon-arrow-left) -->
<!-- Например, с помощью атрибута style -->
<i class="glyphicon glyphicon-arrow-left" aria-hidden="true" style="color: green;"></i>
<!-- Например, с помощью класса (например, glyphicon-green) -->
<style>
/* CSS */
.glyphicon-green {
  color: green;
}
</style>
<i class="glyphicon glyphicon-arrow-left glyphicon-green" aria-hidden="true"></i>

Изменение размера иконки Glyphicon осуществляется с помощью CSS свойства :

<!-- Например, увеличим размер иконки -->
<i class="glyphicon glyphicon-eye-open" style="font-size: 40px;"></i>

Добавление иконок Bootstrap к HTML-элементам

Помещение иконки «Звездочка» в кнопку выполняется следующим образом:

<!-- Разделение иконки и текста с помощью пробела -->
<button type="button" class="btn btn-danger btn-lg">
  <span class="glyphicon glyphicon-star"></span> Избранное
</button>
<!-- Разделение иконки и текста с помощью   -->
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Избранное
</button>

Скриншот примера:

Не забудьте оставить место между значком и текстом, чтобы обеспечить необходимое расстояние. Например, посредством пробела или специсимвола .

Использование иконки Bootstrap в качестве маркера списка ul.

Чтобы это осуществить необходимо:

  1. добавить класс к элементу ;
  2. вставить на страницу фрагмент CSS кода.
<style>
/* CSS */
ul.icon {
  /* список без стандартного маркера */
  list-style-type: none;
}
ul.icon li {
  /* отступ слева */
  text-indent: 0px;
}
ul.icon li:before {
  /* шрифт */
  font-family: 'Glyphicons Halflings';
  /* код иконки */
  content: "\e127";
  /* расположение блока с иконкой */
  float: left;
  /* ширина блока */
  width: 35px;
}
</style>
  
<!-- Маркированный список ul -->
<ul class="icon">
  <li>Содержимое 1 пункта</li>
  <li>Содержимое 2 пункта</li>
  <li>Содержимое 3 пункта</li>
</ul>

Пример, как иконку можно поместить в элемент input:

<style>
/* CSS */
.input-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
  top: 25px;
}
.form-icon {
  position: relative;
}
.form-icon input {
  padding-left: 42.5px;
}
</style>
  
<!-- HTML -->
<div class="form-group form-icon">
  <label class="control-label" for="name-user">Имя пользователя:</label>
  <input class="form-control" id="name-user">
  <i class="glyphicon glyphicon-user input-icon" aria-hidden="true"></i>
</div>

Misc elements

Address


The element is updated to reset the browser default from to . is also now inherited, and has been added. s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with .

Twitter, Inc. 1355 Market St, Suite 900 San Francisco, CA 94103P: (123) 456-7890
Full Namefirst.last@example.com

Inline elements

The element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

Summary

The default on summary is , so we reset that to to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. is used to generate the widths (in percent) of each individual column while sets the width for the column gutters.

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the and to something like this:

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in (not , , or ).

How do they work?

So, how do I add an icon to my webpage? Well, Glyphicons can be used on the web in one of three ways.

You can use a simple tag to place an glyphicon in your page, like this:

=

  • The first class—glyphicon—is a base class. It tells the tag, «hey, heads up: this is going to be an icon.»
  • The second class (in this example, glyphicon-home) points the specific icon you want to use. This one is an icon of a house!

To use a HTML Tag for an icon, simply copy and paste anywhere within the of your page.

Warning: Don’t mix glyphicons with other components

Icon classes shouldn’t be combined with other elements in Bootstrap. They’re designed to be standalone.

This works slightly differently, by:

  1. Specifying the Glyphicon web-font in a CSS rule with
  2. Using the Unicode HTML Entity to display the icon

Firstly, the CSS rule. This should be placed inside a tag, or better yet, in a seperate stylesheet:

          span.icon { 
            font-family 'Glyphicons Halflings'; }
        

Next, the HTML Entity part:

          <span class="icon">&#xf015;</span>
        

The CSS rule specifies that any Unicode HTML Entity inside a tag will be rendered on the page as an icon.

The HTML entity inside the tag (in this case, &#xf015;) is a string of characters that tells the web-font to display a certain icon.

Note: This method may offer you more flexibility (for example, you could use a or tag instead).

This method works by including the rendering of the icon before the content using the CSS psuedo-element.

Firstly, the web-font is specified with , and then the icon is specified by using the property alongside a unicode hex entity (in this case, f015).

Because the hex entity is inside a style tag, it must be prepended with an escaped backslash, making it \f015.

This should be placed inside a tag, or better yet, in a seperate stylesheet:

          span.icon:before { 
            font-family 'Glyphicons Halflings'; 
            content "\f015"; }
        

To add this icon to a page, add this HTML tag anywhere in the of your page.

          <span class="icon"></span>
        

Note: This method is useful because it seperates the visual elements of your design—like icons—from the structural HTML, so you can add glyphicons to existing elements. Particularly useful for tasks like WordPress or Moodle theme development, for example.

What are Glyphicons?

Glyphicons are basically little symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage. They’re implemented in Bootstrap as an icon font — a custom font that contains these glyphs instead of letters.

If you’re creating a site based on Bootstrap 3.3.7, you already have access to all 260 glyphs in the Glyphicons 1.9 set.

Don’t know how to set up Bootstrap? Go check out the offical getting started guide, or simply just include these two lines in your tag:

(Bootstrap hosting very kindly provided by bootstrapcdn.com)

Counterpoint

Icon fonts aren’t the only way to implement icons on the web. If you’re looking for a explanation of using icon fonts vs. SVG files (another possible method), I’d suggest reading this excellent post by Ian Feather: Ten reasons we switched from an icon font to SVG.

Example

Badges scale to match the size of the immediate parent element by using relative font sizing and units.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges can be used as part of links or buttons to provide a counter.

Notifications 4

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

Profile 9 unread messages

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the class.

Pill badges

Use the modifier class to make badges more rounded (with a larger and additional horizontal ). Useful if you miss the badges from v3.

Primary Secondary Success Danger Warning Info Light Dark

Using the contextual classes on an element quickly provide actionable badges with hover and focus states.

It’s actually pretty straightforward — you shouldn’t modify the appearance of any logo. In most cases, you explicitly should not:

  • change its color
  • change its proportions
  • combine or blend it with other graphic elements together
  • remove any parts of the logo
  • animate the logo
  • use older version of logo (when there is a newer available)
  • alter logo in any way not defined in brand guidelines
  • place another objects inside the minimal white space around logo

Of course, there is always the exception that proves the rule, but honestly, who can decide (except the brand owner) how many changes are ok? That’s why each logo is usually accompanied by set of basic rules on how to use it (brands or logo guidelines) and you should respect it.

What most people actually need is simply to put a few of these logos one next to the other, ideally in a same color, in similar size and maybe with colored background.

Well, to contradict a little, if you keep the original shape of the logo and use just the plain monochromatic version (with enough contrast with background), you should be ok. Most of the brands already have this black (or inverted) version of their logo pre-made and all you have to do is to use the logo with as few changes as possible.

Example

Badges scale to match the size of the immediate parent element by using relative font sizing and units.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges can be used as part of links or buttons to provide a counter.

Notifications 4

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

Profile 9 unread messages

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the class.

Pill badges

Use the modifier class to make badges more rounded (with a larger and additional horizontal ). Useful if you miss the badges from v3.

Primary Secondary Success Danger Warning Info Light Dark

Using the contextual classes on an element quickly provide actionable badges with hover and focus states.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Join the official Slack room.
  • Chat with fellow Bootstrappers in IRC. On the server, in the channel.
  • Implementation help may be found at Stack Overflow (tagged ).
  • Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

This is it?

The aim of this page is not to be 100 % correct, but it should help you to use these logos as rightly as possible. To be honest, myself, I did some mistakes mentioned above, ironically with GLYPHICONS Social set (which was the predecessor of this page), that’s one of the reasons this page exists, to replace this set.

If you’ve read this far, you may be a little depressed. You do not have to be. If you are ever in doubt when using logos or icons of well-known brands, use common sense, read at least briefly each logo guidelines and if you don’t completely ignore the basic rules above, it should be ok.

If you look for more color specification for each logo, I can recommend brandcolors.net, where you can quickly search and even download colors of many global brands.

JavaScript behavior

Triggers

Enable dismissal of an alert via JavaScript:

Or with attributes on a button within the alert, as demonstrated above:

Note that closing an alert will remove it from the DOM.

Methods

Method Description
Makes an alert listen for click events on descendant elements which have the attribute. (Not necessary when using the data-api’s auto-initialization.)
Closes an alert by removing it from the DOM. If the and classes are present on the element, the alert will fade out before it is removed.
Destroys an element’s alert.

Events

Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Event Description
This event fires immediately when the instance method is called.
This event is fired when the alert has been closed (will wait for CSS transitions to complete).

Examples

You can use glyphicons in a variety of ways; in buttons, button groups for a toolbar, navigation or prepended form inputs. Here are a few examples of glyphicons in action:

Buttons

Star

<button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star"></span> Star </button>
    

Toolbars

      <div class="btn-toolbar" role="toolbar"> 
          <div class="btn-group"> 
              <button type="button" class="btn btn-default"> 
                <span class="glyphicon glyphicon-align-left"></span> 
              </button>
             <button type="button" class="btn btn-default"> 
                <span class="glyphicon glyphicon-align-center"></span>  
              </button>
               <button type="button" class="btn btn-default"> 
                 <span class="glyphicon glyphicon-align-right"> 
                </span> 
              </button>
              <button type="button" class="btn btn-default"> 
                 <span class="glyphicon glyphicon-align-justify"> 
                 </span> 
               </button>
           </div> 
      </div> 

Navigation

  • Home
  • Shop
  • About
             <ul class="nav nav-pills">
                     <li>
                       <a href="index.html">
                         <span class="glyphicon glyphicon-home"></span> Home
                       </a>
                     </li>
                     <li>
                       <a href="shop.html">
                         <span class="glyphicon glyphicon-shopping-cart"></span> Shop
                       </a>
                     </li>
                     <li>
                       <a href="about.html">
                         <span class="glyphicon glyphicon-info-sign"></span> About
                       </a>
                     </li>
              </ul>

Form Inputs

        	<div class="input-group input-group-lg">
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-envelope"></span>
            </span>
            <input class="form-control" type="text" placeholder="Email address">
        </div>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-lock"></span>
            </span>
            <input class="form-control" type="password" placeholder="Password">
        </div> 

Approach

Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some styles for a simpler baseline and later provide , , and more.

Here are our guidelines and reasons for choosing what to override in Reboot:

  • Update some browser default values to use s instead of s for scalable component spacing.
  • Avoid . Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of is a simpler mental model.
  • For easier scaling across device sizes, block elements should use s for s.
  • Keep declarations of -related properties to a minimum, using whenever possible.

How it began

After school, I started to work in an advertising agency focused on sign-making. In this period of my life, I acquired the most of practical experience with various materials for advertising and printing production.

But once I started my career as a freelance graphic designer, the scope of my everyday work has expanded from printed design only, to web and mobile app interface design as well, almost overnight. During that time, I found myself desperately in need of the source of high quality symbols and icons.

From my previous job, I knew a great collection of AIGA symbol signs, created by Roger Cook and Don Shanosky. Later, as I started to read more about typography and symbols, I discovered Otto Neurath’s Isotypes (work of graphic artist Gerd Arntz) or famous icons made by Susan Kare for the Apple Macintosh. Those have affected me the most, but of course, there were many others which I may not even realize.

I had very low confidence that I could create anything at least remotely useful as they did, but I had to try at least, otherwise I would have been left without a tool I needed so much.

Использование

Иконки Bootstrap — это SVG, поэтому вы можете включить их в свой HTML несколькими способами в зависимости от того, как настроен ваш проект. Иконки Bootstrap включают в себя и в по умолчанию для обеспечения легкого изменения размера с помощью .

Внедрение

Встраивайте свои иконки в HTML-код вашей страницы (в отличие от внешнего файла изображений). Здесь мы использовали пользовательскую и .

Спрайт

Используйте SVG-спрайт для вставки любого значка через элемент . Используйте имя файла значка в качестве идентификатора фрагмента (например, это ). SVG-спрайты позволяют ссылаться на внешний файл, похожий на элемент , но с использованием возможностей для простого создания тем.

Скопируйте SVG-иконки Bootstrap в выбранный вами каталог и назовите их как обычные изображения с помощью элемента .

CSS

Вы также можете использовать SVG в своем CSS (обязательно указывайте символы, например в диапазоне от до шестнадцатеричных значений цвета). Если размеры не указаны через и на, значок заполнит доступное пространство.

Атрибут необходим, если вы хотите изменить размер значков с использованием

Обратите внимание, что атрибут является обязательным

Работа с SVG

SVG прекрасен для работы, но у них есть некоторые известные причуды, чтобы обойти их. Учитывая многочисленные способы использования SVGs, мы не включили эти атрибуты и обходные пути в наш код.

  • Обработка фокуса нарушена в Internet Explorer и Edge. При встраивании ваших SVG добавьте к элементу . Узнайте больше на Stack Overflow

  • Браузеры непоследовательно объявляют SVG как теги с помощью голосовой поддержки. Добавьте чтобы избежать проблем.

  • Safari пропускает при использовании не сфокусированных SVG. Поэтому, используйте при встраивании файла и используйте CSS для визуального скрытия эквивалентной метки.


С этим читают