Eu gostaria de puder usar todos os ícone da font-awesome 4.7
no meu website
sem ter de escrever o código de cada ícone.
Não estou a falar de iframe
porque quererei usar Jquery events
neles.
Se entendi você quer criar algo para exibir todos disponíveis sem precisar ter que ficar acessando a documentação, seria isto mesmo?
Você pode usar o document.styleSheets
e depois o cssRules
para capturar todas rules adicionadas no documento e filtrar para exibir somente as do font-awesome
Note que a filtragem tem que manter todas rules com como prefixo fa-
e com sufixo :before
, assim por exemplo:
var removeUnused = /^\.|\:{1,}before/g;
var isFont = /\.fa-.*?:before/;
var sheet, rules, fontawesome = [];
for (var i = 0, style = document.styleSheets, j = style.length; i < j; i++) {
sheet = style[i];
if (!sheet) continue;
rules = sheet.cssRules;
if (!rules) continue;
for (var x = 0, y = rules.length; x < y; x++) {
if (!isFont.test(rules[x].selectorText)) continue;
fontawesome.push(rules[x].selectorText.replace(removeUnused, ""));
}
}
console.log(fontawesome);
<style>
.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}
</style>
Não adicionei o CDN porque o CORS impede o acesso ao
cssRules
de diferentes dominios, então este script só vai funcionar se você baixar o font-awesome e colocar no seu site.
Desta forma terá todas classe, então com elas você pode criar os elementos como desejar, assim por exemplo:
<script>
var removeUnused = /^\.|\:{1,}before/g;
var isFont = /\.fa-.*?:before/;
var sheet, rules, fontawesome = [];
for (var i = 0, style = document.styleSheets, j = style.length; i < j; i++) {
sheet = style[i];
if (!sheet) continue;
rules = sheet.cssRules;
if (!rules) continue;
for (var x = 0, y = rules.length; x < y; x++) {
if (!isFont.test(rules[x].selectorText)) continue;
fontawesome.push(rules[x].selectorText.replace(removeUnused, ""));
}
}
var icones = document.querySelector("#icones"),
resultado = [];
for (var i = 0, j = fontawesome.length; i < j; i++) {
resultado.push('<i class="' + fontawesome[i] + '"></i>');
}
icones.innerHTML = resultado.join(", "); //Virgula é para separar os icones
</script>
.
das classes, não dá pra testar infelizmente no sandbox do Stack Overflow porque o CORS por segurança bloqueia. Me avisa qualquer coisa ;)