+style:
.icon-card:
text-align: center
padding: 8px 4px
border-radius: 6px
transition: background-color 0.15s
.icon-card:hover:
background-color: '#e9ecef'
cursor: pointer
.icon-card i:
font-size: 2em
display: block
margin-bottom: 6px
.icon-card .icon-name:
font-size: 0.7em
color: '#6c757d'
word-break: break-all
line-height: 1.2
main:
- h1: "FontAwesome Icons"
- p: "All free icons from FontAwesome 7.0.1, available as YAML shorthand definitions."
- h2: "Usage"
- p: "Reference any icon by its name in your YAML content:"
- pre: "p:\n - This\n - fa-solid-arrow-right\n - that"
- h3: "This renders as:"
- p:
- This
- fa-solid-arrow-right
- that
- hr
- raw: '<input type="text" id="icon-filter" class="form-control mb-4" placeholder="Filter icons by name...">'
- icon-grid: generate
- raw: |
<script>
document.getElementById('icon-filter').addEventListener('input', function() {
var q = this.value.toLowerCase();
document.querySelectorAll('.icon-card').forEach(function(card) {
card.parentElement.style.display = card.getAttribute('data-name').includes(q) ? '' : 'none';
});
document.querySelectorAll('.icon-section').forEach(function(sec) {
var visible = sec.querySelectorAll('.col:not([style*="display: none"])').length;
sec.style.display = visible ? '' : 'none';
});
});
document.querySelectorAll('.icon-card').forEach(function(card) {
card.addEventListener('click', function() {
var name = this.getAttribute('data-name');
navigator.clipboard.writeText(name).then(function() {
var nameEl = card.querySelector('.icon-name');
var orig = nameEl.textContent;
nameEl.textContent = 'Copied!';
nameEl.style.color = '#198754';
setTimeout(function() {
nameEl.textContent = orig;
nameEl.style.color = '';
}, 1000);
});
});
});
</script>
^icon-grid:
script: javascript
code: |
var docRoot = env.DOCUMENT_ROOT || '.';
var yamlPath = joinPath(docRoot, '..', 'fontawesome.yaml');
var text = readFile(yamlPath);
function esc(s) {
return String(s == null ? '' : s)
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
.replace(/"/g, '"').replace(/'/g, ''');
}
var icons = {};
var currentName = null;
var lines = text.split('\n');
var nameRe = /^\^(fa-\S+):\s*$/;
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
var m = nameRe.exec(line);
if (m) {
currentName = m[1];
} else if (currentName && line.replace(/^\s+/, '').indexOf('class:') === 0) {
var cssClass = line.split('class:')[1].replace(/^\s+|\s+$/g, '');
var style = currentName.split('-')[1];
if (!icons[style]) icons[style] = [];
icons[style].push([currentName, cssClass]);
currentName = null;
}
}
var styleLabels = {brands: 'Brand Icons', regular: 'Regular Icons', solid: 'Solid Icons'};
var order = ['solid', 'regular', 'brands'];
for (var j = 0; j < order.length; j++) {
var style = order[j];
if (!icons[style]) continue;
var label = styleLabels[style] || style;
var count = icons[style].length;
print('<div class="icon-section">');
print('<h3>' + esc(label) + ' <small class="text-muted">(' + count + ')</small></h3>');
print('<div class="row row-cols-3 row-cols-sm-4 row-cols-md-6 row-cols-lg-8 g-2 mb-4">');
for (var k = 0; k < icons[style].length; k++) {
var name = icons[style][k][0];
var cls = icons[style][k][1];
var ename = esc(name);
var eclass = esc(cls);
print('<div class="col"><div class="icon-card" data-name="' + ename + '">');
print('<i class="' + eclass + '"></i>');
print('<div class="icon-name">' + ename + '</div>');
print('</div></div>');
}
print('</div></div>');
}
Powered by bserver - YAML-driven web serving