Bootstrap 5
Icones
Fontawesome
Template
Html
Integration Icones
Dashboard
Icones FontAwesome 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 Fontawsome Bootstrap 5 2026 23040039 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem 0;
font-family: '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(102, 126, 234, 0.3);
border-color: #667eea;
}
.icon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
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, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 20px;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: rotate(5deg) scale(1.05);
}
.icon-wrapper i {
font-size: 40px;
color: #667eea;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper i {
color: white;
transform: scale(1.1);
}
.icon-name {
font-size: 13px;
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, #667eea 0%, #764ba2 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(102, 126, 234, 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: #667eea;
}
.filter-btn:hover,
.filter-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 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;
}
</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" style="background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
<i class="fab fa-font-awesome me-3"></i>200 Icônes Font Awesome
</h1>
<p class="lead text-muted mb-4">Collection complète d'icônes • Cliquez sur une card pour copier le code</p>
<!-- Search Box -->
<div class="search-box">
<div class="d-flex align-items-center">
<i class="fas fa-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="solid">Solid</button>
<button class="filter-btn" data-filter="brands">Marques</button>
<button class="filter-btn" data-filter="regular">Regular</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="fas fa-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="far fa-copy me-2"></i>
Cliquez sur une icône pour copier son code HTML •
<i class="fas fa-code ms-3 me-1"></i> <i class="fas fa-heart"></i>
</p>
</div>
</div>
<!-- Toast Notification -->
<div class="toast-notification" id="toast">
<i class="fas fa-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 Font Awesome (mix de solid, regular, brands)
const icons = [
// 50 icônes Solid les plus populaires
'heart', 'star', 'user', 'home', 'search', 'check', 'times', 'cog', 'envelope', 'phone',
'calendar', 'map-marker', 'camera', 'video', 'music', 'shopping-cart', 'credit-card', 'bell', 'bookmark', 'comment',
'share', 'download', 'upload', 'trash', 'edit', 'lock', 'unlock', 'flag', 'tag', 'tags',
'folder', 'file', 'image', 'images', 'play', 'pause', 'stop', 'backward', 'forward', 'chevron-left',
'chevron-right', 'chevron-up', 'chevron-down', 'bars', 'ellipsis-v', 'ellipsis-h', 'plus', 'minus', 'cloud', 'wifi',
// 50 icônes supplémentaires Solid
'address-book', 'address-card', 'adjust', 'air-freshener', 'align-center', 'align-justify', 'align-left', 'align-right',
'ambulance', 'anchor', 'archive', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'asterisk', 'at', 'award',
'baby', 'bacon', 'balance-scale', 'ban', 'barcode', 'bath', 'battery-full', 'bed', 'beer', 'bicycle', 'binoculars',
'birthday-cake', 'blender', 'bold', 'bolt', 'bomb', 'bone', 'bong', 'book', 'book-open', 'bookmark',
'bowling-ball', 'box', 'box-open', 'boxes', 'brain', 'briefcase', 'broadcast-tower', 'broom', 'brush', 'bug', 'building',
// 50 icônes Marques populaires
'facebook', 'twitter', 'instagram', 'youtube', 'linkedin', 'github', 'google', 'apple', 'microsoft', 'windows',
'android', 'amazon', 'spotify', 'discord', 'twitch', 'reddit', 'whatsapp', 'telegram', 'tiktok', 'snapchat',
'pinterest', 'skype', 'slack', 'dropbox', 'paypal', 'stripe', 'bitcoin', 'ethereum', 'wordpress', 'drupal',
'joomla', 'magento', 'shopify', 'react', 'vuejs', 'angular', 'node', 'node-js', 'python', 'java',
'php', 'laravel', 'symfony', 'bootstrap', 'sass', 'less', 'css3', 'html5', 'js', 'js-square',
// 50 icônes Regular et divers
'smile', 'frown', 'meh', 'laugh', 'grin', 'sad-tear', 'angry', 'dizzy', 'flushed', 'kiss',
'thumbs-up', 'thumbs-down', 'hand-peace', 'hand-rock', 'hand-paper', 'hand-scissors', 'hand-spock', 'hand-pointer', 'handshake', 'clapping',
'crown', 'gem', 'trophy', 'medal', 'graduation-cap', 'hat-wizard', 'glasses', 'mask', 'theater-masks', 'palette',
'paint-brush', 'pencil', 'pen', 'highlighter', 'marker', 'eraser', 'ruler', 'compass', 'drafting-compass', 'calculator',
'microchip', 'database', 'server', 'desktop', 'laptop', 'tablet', 'mobile', 'headphones', 'keyboard', 'mouse'
];
let currentFilter = 'all';
let searchTerm = '';
// Fonction pour déterminer le type d'icône (fas, far, fab)
function getIconType(iconName) {
const brandsIcons = ['facebook', 'twitter', 'instagram', 'youtube', 'linkedin', 'github', 'google', 'apple',
'microsoft', 'windows', 'android', 'amazon', 'spotify', 'discord', 'twitch', 'reddit', 'whatsapp', 'telegram',
'tiktok', 'snapchat', 'pinterest', 'skype', 'slack', 'dropbox', 'paypal', 'stripe', 'bitcoin', 'ethereum',
'wordpress', 'drupal', 'joomla', 'magento', 'shopify', 'react', 'vuejs', 'angular', 'node', 'node-js',
'python', 'java', 'php', 'laravel', 'symfony', 'bootstrap', 'sass', 'less', 'css3', 'html5', 'js', 'js-square'];
const regularIcons = ['smile', 'frown', 'meh', 'laugh', 'grin', 'sad-tear', 'angry', 'dizzy', 'flushed', 'kiss',
'thumbs-up', 'thumbs-down', 'hand-peace', 'hand-rock', 'hand-paper', 'hand-scissors', 'hand-spock', 'hand-pointer'];
if (brandsIcons.includes(iconName)) return 'fab';
if (regularIcons.includes(iconName)) return 'far';
return 'fas';
}
// 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 iconType = getIconType(icon);
if (currentFilter === 'all') return matchesSearch;
if (currentFilter === 'solid') return matchesSearch && iconType === 'fas';
if (currentFilter === 'brands') return matchesSearch && iconType === 'fab';
if (currentFilter === 'regular') return matchesSearch && iconType === 'far';
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="fas fa-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 au lieu d'onclick inline
grid.innerHTML = filteredIcons.map((icon, index) => {
const iconType = getIconType(icon);
const iconCode = `<i class="${iconType} fa-${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="${iconType} fa-${icon}" data-icon-code="${iconCode.replace(/"/g, '"')}" id="${cardId}">
<div class="icon-wrapper">
<i class="${iconType} fa-${icon}"></i>
</div>
<div class="icon-name">fa-${icon}</div>
<button class="copy-btn" data-icon-classes="${iconType} fa-${icon}" data-icon-code="${iconCode.replace(/"/g, '"')}">
<i class="far fa-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="fas fa-check me-1"></i>Copié !';
setTimeout(() => {
btn.classList.remove('copied');
btn.innerHTML = '<i class="far fa-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);
// Statistiques des icônes
console.log('🎨 200 icônes Font Awesome chargées avec succès !');
console.log('💡 Cliquez sur une icône pour copier son code HTML');
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur