0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Drop CSS icons for SVGs (#22708)

* add the svg icon as a partial so we can include it easily

* add the icon to the homepage

* drop .bd-booticon for svgs here

* rip out the import for .bd-booticon sass file

* Delete _booticon.scss

* indentation

* Update bootstrap-icon.html

* remove those
This commit is contained in:
Mark Otto 2017-05-26 20:54:12 -07:00 committed by GitHub
parent b872a6f807
commit 733c092681
5 changed files with 5 additions and 30 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 612 612" width="128" height="128"><g id="solid"><g id="bg"><path fill="#fff" d="M510,5a97.3,97.3,0,0,1,97,97V510a97.3,97.3,0,0,1-97,97H102A97.3,97.3,0,0,1,5,510V102A97.3,97.3,0,0,1,102,5H510m0-5H102C45.9,0,0,45.9,0,102V510c0,56.1,45.9,102,102,102H510c56.1,0,102-45.9,102-102V102C612,45.9,566.1,0,510,0h0Z"/></g></g><path fill="#fff" d="M196.77,471.5V154.43H320.92c54.27,0,91,31.64,91,79.1,0,33-24.17,63.72-54.71,69.21v1.76c43.07,5.49,70.75,35.82,70.75,78,0,55.81-40,89-107.45,89H196.77Zm39.55-180.4H299.6c46.8,0,72.29-18.68,72.29-53,0-31.42-21.53-48.78-60-48.78H236.32V291.1Zm78.22,145.46c47.68,0,72.73-19.34,72.73-56s-25.93-55.37-76.46-55.37H236.32v111.4h78.22Z"/></svg>

After

Width:  |  Height:  |  Size: 725 B

View File

@ -14,14 +14,14 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
## Mark and logo
Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in Helvetica Neue Bold. **Do not use the Twitter bird** in association with Bootstrap.
Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
<div class="bd-brand-logos">
<div class="bd-brand-item">
<div class="bd-booticon bd-booticon-lg">B</div>
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
</div>
<div class="bd-brand-item inverse">
<div class="bd-booticon bd-booticon-lg bd-booticon-inverse">B</div>
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
</div>
</div>
<div class="bd-brand-logos">

View File

@ -1,25 +0,0 @@
//
// Bootstrap "B" Booticon
//
.bd-booticon {
display: block;
width: 9rem;
height: 9rem;
font-size: 6.5rem;
line-height: 9rem;
color: #fff;
text-align: center;
cursor: default;
background-color: $bd-purple;
border-radius: 15%;
&.inverse {
color: $bd-purple;
background-color: #fff;
}
&.outline {
background-color: transparent;
border: 1px solid $bd-purple-light;
}
}

View File

@ -39,7 +39,6 @@ $bd-warning: #f0ad4e;
$bd-info: #5bc0de;
// Load docs components
@import "booticon";
@import "nav";
@import "masthead";
@import "featurettes";

View File

@ -4,7 +4,7 @@ layout: home
<main class="bd-masthead" id="content" role="main">
<div class="container">
<span class="bd-booticon outline">B</span>
{% include bootstrap-icon.html %}
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
<p class="lead">
<a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>