Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-08 12:22:23 +04:00
Code Issues Projects Releases Wiki Activity

icon fix

Browse Source
This commit is contained in:
codecalm
2025-01-02 20:32:27 +01:00
parent 3e25c49827
commit 7d45f50335
10 changed files with 61 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/ui/components/alerts.mdx
+9 -9
View File
@@ -120,7 +120,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
<div class="alert alert-success alert-dismissible" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/check -->
<!-- SVG icon from http://tabler.io/icons/icon/check -->
<svg>...</svg>
</div>
<div>
@@ -204,7 +204,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
<div class="alert alert-success" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/check -->
<!-- SVG icon from http://tabler.io/icons/icon/check -->
<svg>...</svg>
</div>
<div>
@@ -216,7 +216,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
<div class="alert alert-info" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/info-circle -->
<!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
<svg>...</svg>
</div>
<div>
@@ -228,7 +228,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
<div class="alert alert-warning" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
<!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
<svg>...</svg>
</div>
<div>
@@ -240,7 +240,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
<div class="alert alert-danger" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
<!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
<svg>...</svg>
</div>
<div>
@@ -381,7 +381,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
<div class="alert alert-important alert-success alert-dismissible" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/check -->
<!-- SVG icon from http://tabler.io/icons/icon/check -->
<svg>...</svg>
</div>
<div>
@@ -393,7 +393,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
<div class="alert alert-important alert-info alert-dismissible" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/info-circle -->
<!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
<svg>...</svg>
</div>
<div>
@@ -405,7 +405,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
<div class="alert alert-important alert-warning alert-dismissible" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
<!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
<svg>...</svg>
</div>
<div>
@@ -417,7 +417,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
<div class="alert alert-important alert-danger alert-dismissible" role="alert">
<div class="d-flex">
<div>
<!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
<!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
<svg>...</svg>
</div>
<div>
docs/ui/components/avatars.mdx
+1 -1
View File
@@ -66,7 +66,7 @@ Apart from pictures and initials, you can also use icons to make the avatars mor
```html
<span class="avatar">
<!-- SVG icon from http://tabler-icons.io/i/user -->
<!-- SVG icon from http://tabler.io/icons/icon/user -->
<svg>...</svg>
</span>
```
docs/ui/components/breadcrumb.mdx
+1 -1
View File
@@ -96,7 +96,7 @@ If you wish to use breadcrumbs in headers, place them above the headers.
<div class="col-auto">
<div class="btn-list">
<a href="#" class="btn d-none d-md-inline-flex">
<!-- SVG icon from http://tabler-icons.io/i/edit -->
<!-- SVG icon from http://tabler.io/icons/icon/edit -->
<svg>...</svg> Edit
</a>
<a href="#" class="btn btn-primary">Publish</a>
docs/ui/components/buttons.mdx
+25 -25
View File
@@ -335,12 +335,12 @@ You can use the icons of popular social networking sites, which users are famili
```html
<a href="#" class="btn btn-facebook">
<!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg>
Facebook
</a>
<a href="#" class="btn btn-twitter">
<!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg>
Twitter
</a>
@@ -511,59 +511,59 @@ You can also add an icon without the name of a social networking site, if you wa
```html
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-google btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-google -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-youtube -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-vimeo -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-dribbble -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-github -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-instagram -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-pinterest -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-vk btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-vk -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-rss btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/rss -->
<!-- SVG icon from http://tabler.io/icons/icon/rss -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-flickr -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-tabler -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
<svg>...</svg>
</a>
```
@@ -631,31 +631,31 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
```html
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/activity -->
<!-- SVG icon from http://tabler.io/icons/icon/activity -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-github btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/brand-github -->
<!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-success btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/bell -->
<!-- SVG icon from http://tabler.io/icons/icon/bell -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-warning btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/star -->
<!-- SVG icon from http://tabler.io/icons/icon/star -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-danger btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/trash -->
<!-- SVG icon from http://tabler.io/icons/icon/trash -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-purple btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/chart-bar -->
<!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
<svg>...</svg>
</a>
<a href="#" class="btn btn-icon" aria-label="Button">
<!-- SVG icon from http://tabler-icons.io/i/git-merge -->
<!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
<svg>...</svg>
</a>
```
@@ -707,7 +707,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
```html
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<!-- SVG icon from http://tabler-icons.io/i/calendar -->
<!-- SVG icon from http://tabler.io/icons/icon/calendar -->
<svg>...</svg>
</button>
<div class="dropdown-menu">
@@ -721,7 +721,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
</div>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<!-- SVG icon from http://tabler-icons.io/i/calendar -->
<!-- SVG icon from http://tabler.io/icons/icon/calendar -->
<svg>...</svg>
Show calendar
</button>
docs/ui/components/empty.mdx
+1 -1
View File
@@ -94,7 +94,7 @@ Instead of adding an icon or illustration you can simply give the text:
</p>
<div class="empty-action">
<a href="#" class="btn btn-primary">
<!-- SVG icon from http://tabler-icons.io/i/arrow-left -->
<!-- SVG icon from http://tabler.io/icons/icon/arrow-left -->
<svg>...</svg>
Take me home
</a>
docs/ui/components/icons.mdx
+3 -3
View File
@@ -109,12 +109,12 @@ banner: icons
```
```html
<!-- SVG icon from http://tabler-icons.io/i/heart -->
<!-- SVG icon from http://tabler.io/icons/icon/heart -->
<svg class="icon-pulse" ...>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/bell -->
<!-- SVG icon from http://tabler.io/icons/icon/bell -->
<svg class="icon-tada" ...>...</svg>
<!-- SVG icon from http://tabler-icons.io/i/rotate-clockwise -->
<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
<svg class="icon-rotate" ...>...</svg>
```
docs/ui/components/ribbons.mdx
+5 -5
View File
@@ -25,7 +25,7 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
<div class="card-body">
</div>
<div class="ribbon">
<!-- SVG icon from http://tabler-icons.io/i/star -->
<!-- SVG icon from http://tabler.io/icons/icon/star -->
<svg>...</svg>
</div>
</div>
@@ -60,7 +60,7 @@ Using multiple classes at once will give you more position options. For example,
<div class="card-body">
</div>
<div class="ribbon ribbon-top ribbon-start">
<!-- SVG icon from http://tabler-icons.io/i/star -->
<!-- SVG icon from http://tabler.io/icons/icon/star -->
<svg>...</svg>
</div>
</div>
@@ -88,7 +88,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
<div class="card-body">
</div>
<div class="ribbon bg-red">
<!-- SVG icon from http://tabler-icons.io/i/star -->
<!-- SVG icon from http://tabler.io/icons/icon/star -->
<svg>...</svg>
</div>
</div>
@@ -116,7 +116,7 @@ Add your own text to a ribbon to display any additional information and make it
<div class="card-body">
</div>
<div class="ribbon bg-green">
<!-- SVG icon from http://tabler-icons.io/i/star -->
<!-- SVG icon from http://tabler.io/icons/icon/star -->
<svg>...</svg>
</div>
</div>
@@ -144,7 +144,7 @@ Change the style of a ribbon to make it go well with your interface design.
<div class="card-body">
</div>
<div class="ribbon ribbon-bookmark bg-orange">
<!-- SVG icon from http://tabler-icons.io/i/star -->
<!-- SVG icon from http://tabler.io/icons/icon/star -->
<svg>...</svg>
</div>
</div>
docs/ui/components/timelines.mdx
+14 -14
View File
@@ -147,7 +147,7 @@ The available timeline design is comprised of many components that will help you
```html
<ul class="timeline">
<li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
<div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -159,7 +159,7 @@ The available timeline design is comprised of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -171,7 +171,7 @@ The available timeline design is comprised of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -183,7 +183,7 @@ The available timeline design is comprised of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
<div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -195,7 +195,7 @@ The available timeline design is comprised of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -214,7 +214,7 @@ The available timeline design is comprised of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -239,7 +239,7 @@ The available timeline design is comprised of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -398,7 +398,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
```html
<ul class="timeline timeline-simple">
<li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
<div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -410,7 +410,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -422,7 +422,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -434,7 +434,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
<div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -446,7 +446,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -465,7 +465,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
@@ -490,7 +490,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
<div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
<svg>...</svg>
</div>
<div class="card timeline-event-card">
docs/ui/forms/form-elements.mdx
+1 -1
View File
@@ -48,7 +48,7 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
<div class="input-icon">
<input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
<span class="input-icon-addon">
<!-- SVG icon from http://tabler-icons.io/i/search -->
<!-- SVG icon from http://tabler.io/icons/icon/search -->
<svg>...</svg>
</span>
</div>
src/pages/_includes/ui/icon.html
+1 -1
View File
@@ -26,7 +26,7 @@
{% if site.use-iconfont %}
<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
{% else %}
<!-- Download SVG icon from http://tabler-icons.io/i/{{ icon-name }} -->
<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
{% assign svg-icon = site.data.icons[icon-name].svg[type] | default: '' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% endif %}