Bootstrap 5
Icones
Tabler
Template
Html
Integration Icones
Dashboard
Icones Tabler optimisées pour la visualisation et l'interaction. Icônes modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Icones Tabler Bootstrap 5 2026 23040037 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Tabler Icons Webfont -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
<style>
body {
background: linear-gradient(135deg, #0054a6 0%, #0066cc 100%);
min-height: 100vh;
padding: 2rem 0;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.header-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
}
.icon-card {
background: white;
border-radius: 16px;
padding: 1.5rem 1rem;
height: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
cursor: pointer;
position: relative;
overflow: hidden;
}
.icon-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 84, 166, 0.3);
border-color: #0054a6;
}
.icon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0054a6, #0066cc);
transform: scaleX(0);
transition: transform 0.3s;
}
.icon-card:hover::before {
transform: scaleX(1);
}
.icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
border-radius: 20px;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper {
background: linear-gradient(135deg, #0054a6 0%, #0066cc 100%);
transform: rotate(5deg) scale(1.05);
}
.icon-wrapper i {
font-size: 40px;
color: #0054a6;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper i {
color: white;
transform: scale(1.1);
}
.icon-name {
font-size: 12px;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
word-break: break-all;
font-family: 'Courier New', monospace;
background: #f8f9fa;
padding: 4px 8px;
border-radius: 8px;
}
.copy-btn {
background: linear-gradient(135deg, #0054a6 0%, #0066cc 100%);
color: white;
border: none;
padding: 8px 16px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s;
width: 100%;
}
.copy-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 84, 166, 0.4);
}
.copy-btn.copied {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.search-box {
background: white;
border-radius: 50px;
padding: 0.5rem 1.5rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.search-box input {
border: none;
outline: none;
padding: 12px 0;
font-size: 16px;
width: 100%;
}
.search-box input::placeholder {
color: #999;
}
.category-filter {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 1rem;
}
.filter-btn {
background: white;
border: 2px solid transparent;
padding: 8px 20px;
border-radius: 30px;
font-weight: 500;
transition: all 0.3s;
color: #0054a6;
}
.filter-btn:hover,
.filter-btn.active {
background: linear-gradient(135deg, #0054a6 0%, #0066cc 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 84, 166, 0.3);
}
.stats-badge {
background: rgba(255, 255, 255, 0.2);
padding: 8px 20px;
border-radius: 30px;
color: white;
font-weight: 500;
backdrop-filter: blur(10px);
}
.toast-notification {
position: fixed;
bottom: 30px;
right: 30px;
background: white;
padding: 16px 24px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
display: none;
align-items: center;
gap: 12px;
z-index: 9999;
animation: slideInToast 0.3s ease;
}
@keyframes slideInToast {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast-notification.show {
display: flex;
}
.footer-note {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 1rem 2rem;
backdrop-filter: blur(10px);
color: white;
}
.badge-tabler {
background: #0054a6;
color: white;
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
margin-left: 8px;
}
</style>
</head>
<body>
<div class="container">
<!-- Header Section -->
<div class="header-section">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="display-4 fw-bold mb-3 d-flex align-items-center" style="background: linear-gradient(135deg, #0054a6, #0066cc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
<i class="ti ti-brand-tabler me-3" style="background: none; -webkit-text-fill-color: #0054a6;"></i>
200 Icônes Tabler
<span class="badge-tabler">6000+ disponibles</span>
</h1>
<p class="lead text-muted mb-4">Collection d'icônes Tabler (MIT) • 24x24 grid • 2px stroke • Cliquez pour copier</p>
<!-- Search Box -->
<div class="search-box">
<div class="d-flex align-items-center">
<i class="ti ti-search text-muted me-3"></i>
<input type="text" id="searchInput" placeholder="Rechercher une icône... (ex: heart, user, home)">
</div>
</div>
<!-- Category Filters -->
<div class="category-filter">
<button class="filter-btn active" data-filter="all">Toutes (200)</button>
<button class="filter-btn" data-filter="ui">UI & Actions</button>
<button class="filter-btn" data-filter="brands">Marques</button>
<button class="filter-btn" data-filter="dev">Dev & Tech</button>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end mt-4 mt-lg-0">
<div class="stats-badge d-inline-block">
<i class="ti ti-icons me-2"></i>
<span id="visibleCount">200</span> icônes affichées
</div>
</div>
</div>
</div>
<!-- Icons Grid -->
<div class="row g-4" id="iconsGrid">
<!-- Les icônes seront générées ici par JavaScript -->
</div>
<!-- Footer -->
<div class="footer-note text-center mt-5">
<p class="mb-0">
<i class="ti ti-copy me-2"></i>
Cliquez sur une icône pour copier son code HTML •
<i class="ti ti-code ms-3 me-1"></i> <i class="ti ti-heart"></i>
</p>
</div>
</div>
<!-- Toast Notification -->
<div class="toast-notification" id="toast">
<i class="ti ti-check-circle" style="color: #11998e; font-size: 24px;"></i>
<div>
<strong style="color: #333;">Code copié !</strong>
<div style="color: #666; font-size: 14px;" id="toastMessage"></div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Liste de 200 icônes Tabler organisées par catégories
const icons = [
// UI & Actions (60 icônes)
'heart', 'star', 'user', 'home', 'search', 'check', 'x', 'settings', 'mail', 'phone',
'calendar', 'map-pin', 'camera', 'video', 'music', 'shopping-cart', 'credit-card', 'bell', 'bookmark', 'message',
'share', 'download', 'upload', 'trash', 'edit', 'lock', 'lock-open', 'flag', 'tag', 'tags',
'folder', 'file', 'photo', 'photos', 'player-play', 'player-pause', 'player-stop', 'arrow-back', 'arrow-forward', 'chevron-left',
'chevron-right', 'chevron-up', 'chevron-down', 'menu-2', 'dots', 'dots-vertical', 'plus', 'minus', 'cloud', 'wifi',
'eye', 'eye-off', 'volume', 'volume-3', 'moon', 'sun', 'language', 'logout', 'login', 'user-plus',
// Marques (40 icônes)
'brand-facebook', 'brand-twitter', 'brand-instagram', 'brand-youtube', 'brand-linkedin', 'brand-github', 'brand-google', 'brand-apple',
'brand-microsoft', 'brand-windows', 'brand-android', 'brand-amazon', 'brand-spotify', 'brand-discord', 'brand-twitch', 'brand-reddit',
'brand-whatsapp', 'brand-telegram', 'brand-tiktok', 'brand-snapchat', 'brand-pinterest', 'brand-skype', 'brand-slack', 'brand-dropbox',
'brand-paypal', 'brand-stripe', 'brand-bitcoin', 'brand-ethereum', 'brand-wordpress', 'brand-react',
'brand-vue', 'brand-angular', 'brand-nodejs', 'brand-python', 'brand-java', 'brand-php', 'brand-laravel', 'brand-bootstrap',
'brand-sass', 'brand-css3', 'brand-html5', 'brand-javascript', 'brand-figma', 'brand-vscode', 'brand-docker', 'brand-git',
// Dev & Tech (60 icônes)
'code', 'code-plus', 'code-minus', 'bug', 'terminal-2', 'database', 'server', 'device-desktop', 'device-laptop', 'device-tablet',
'device-mobile', 'headphones', 'keyboard', 'mouse', 'router', 'shield', 'shield-check', 'shield-lock', 'world', 'world-www',
'api', 'apps', 'atom-2', 'binary', 'braces', 'brackets', 'browser', 'chart-bar', 'chart-pie', 'chart-donut',
'circle', 'square', 'triangle', 'box', 'layout', 'layout-grid', 'layout-list', 'layout-columns', 'link', 'external-link',
'list', 'list-check', 'list-details', 'list-search', 'list-tree', 'loader', 'loader-2', 'loader-3', 'refresh', 'repeat',
'rocket', 'rss', 'ruler', 'ruler-2', 'search', 'send', 'stack', 'stack-2', 'switch', 'template',
// Supplémentaires (40 icônes)
'accessible', 'activity', 'address-book', 'adjustments', 'alarm', 'alert-circle', 'alert-triangle', 'align-center',
'align-left', 'align-right', 'archive', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'artboard',
'award', 'backpack', 'ball-basketball', 'ball-football', 'ball-tennis', 'ban', 'barcode', 'battery',
'battery-charging', 'beach', 'beer', 'bike', 'boat', 'bold',
'book', 'book-2', 'books', 'bottle', 'bow', 'box-multiple', 'briefcase', 'brightness',
'brush', 'bucket', 'building', 'bulb', 'bus', 'businessplan', 'calculator', 'calendar-event',
'candle', 'car', 'cardboards', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'carrot',
'cash', 'cast', 'category', 'ce', 'certificate', 'chalkboard', 'charging-pile', 'chart-arcs'
];
let currentFilter = 'all';
let searchTerm = '';
// Catégories pour le filtrage
const uiActionsIcons = icons.slice(0, 60);
const brandsIcons = icons.slice(60, 100);
const devTechIcons = icons.slice(100, 160);
function getIconCategory(iconName) {
if (uiActionsIcons.includes(iconName)) return 'ui';
if (brandsIcons.includes(iconName)) return 'brands';
if (devTechIcons.includes(iconName)) return 'dev';
return 'other';
}
// Fonction pour afficher les icônes
function renderIcons() {
const grid = document.getElementById('iconsGrid');
const searchLower = searchTerm.toLowerCase();
const filteredIcons = icons.filter(icon => {
const matchesSearch = icon.toLowerCase().includes(searchLower);
const category = getIconCategory(icon);
if (currentFilter === 'all') return matchesSearch;
if (currentFilter === 'ui') return matchesSearch && category === 'ui';
if (currentFilter === 'brands') return matchesSearch && category === 'brands';
if (currentFilter === 'dev') return matchesSearch && category === 'dev';
return matchesSearch;
});
// Mettre à jour le compteur
document.getElementById('visibleCount').textContent = filteredIcons.length;
if (filteredIcons.length === 0) {
grid.innerHTML = `
<div class="col-12 text-center py-5">
<div class="p-5 rounded-4" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);">
<i class="ti ti-search mb-3" style="font-size: 48px; color: white; opacity: 0.5;"></i>
<h3 style="color: white;">Aucune icône trouvée</h3>
<p style="color: rgba(255,255,255,0.8);">Essayez un autre terme de recherche</p>
</div>
</div>
`;
return;
}
// Création des cartes avec data-attributes
grid.innerHTML = filteredIcons.map((icon, index) => {
const iconCode = `<i class="ti ti-${icon}"></i>`;
const cardId = `icon-card-${index}`;
return `
<div class="col-6 col-md-3 col-lg-2">
<div class="icon-card" data-icon-classes="ti ti-${icon}" data-icon-code="${iconCode.replace(/"/g, '"')}" id="${cardId}">
<div class="icon-wrapper">
<i class="ti ti-${icon}"></i>
</div>
<div class="icon-name">ti-${icon}</div>
<button class="copy-btn" data-icon-classes="ti ti-${icon}" data-icon-code="${iconCode.replace(/"/g, '"')}">
<i class="ti ti-copy me-1"></i>Copier
</button>
</div>
</div>
`;
}).join('');
// Attacher les événements après le rendu
attachCardEvents();
}
// Fonction pour attacher les événements aux cartes
function attachCardEvents() {
// Pour les cartes entières
document.querySelectorAll('.icon-card').forEach(card => {
card.addEventListener('click', function(e) {
const classes = this.dataset.iconClasses;
const code = this.dataset.iconCode.replace(/"/g, '"');
copyIconCode(classes, code, this);
});
});
// Pour les boutons de copie
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const classes = this.dataset.iconClasses;
const code = this.dataset.iconCode.replace(/"/g, '"');
const card = this.closest('.icon-card');
copyIconCode(classes, code, card);
});
});
}
// Fonction pour copier le code de l'icône
function copyIconCode(classes, htmlCode, cardElement) {
// Créer un élément temporaire
const tempInput = document.createElement('textarea');
tempInput.value = htmlCode;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
// Afficher la notification toast
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = htmlCode;
toast.classList.add('show');
// Effet visuel sur le bouton
if (cardElement) {
const btn = cardElement.querySelector('.copy-btn');
if (btn) {
btn.classList.add('copied');
btn.innerHTML = '<i class="ti ti-check me-1"></i>Copié !';
setTimeout(() => {
btn.classList.remove('copied');
btn.innerHTML = '<i class="ti ti-copy me-1"></i>Copier';
}, 2000);
}
}
// Cacher le toast après 3 secondes
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
// Gestionnaire de recherche
document.getElementById('searchInput').addEventListener('input', (e) => {
searchTerm = e.target.value;
renderIcons();
});
// Gestionnaire de filtres
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filter = btn.dataset.filter;
currentFilter = filter;
renderIcons();
});
});
// Rendu initial
renderIcons();
// Animation des cards au scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
setTimeout(() => {
document.querySelectorAll('.icon-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s, transform 0.5s';
observer.observe(card);
});
}, 100);
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur