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:
parent
b872a6f807
commit
733c092681
1
docs/_includes/bootstrap-icon.html
Normal file
1
docs/_includes/bootstrap-icon.html
Normal 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 |
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -39,7 +39,6 @@ $bd-warning: #f0ad4e;
|
||||
$bd-info: #5bc0de;
|
||||
|
||||
// Load docs components
|
||||
@import "booticon";
|
||||
@import "nav";
|
||||
@import "masthead";
|
||||
@import "featurettes";
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user