Foreach loop in css

Question

i think i might have a really bad situation, as i cannot think of anything myself. I have a css file with fonts and i need for each font to display the icon and the name of icon.

[class^="Test-Related-"], [class*=" Test-Related-"] {
font-family: $test-related;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

justify-content: center;
display: flex;
height: 100%;
align-items: center;
}

.Test-Related-mobile::before {
content: "\e000";
}

.Test-Related-laptop3::before {
content: "\e31d";
}

.Test-Related-desktop2::before {
content: "\e31e";
}

this is the code i have in css, only i have arround 4000 more icons, is there a way to display them all with foreach loop on webpage ?

only that this was copied from another project, and i need to migrate it to a new one. But now i need to be able to see all of the icons and the name of them. — Eriks, Dec 14 '18 at 14:50
You could use another language to generate the CSS file (Or display them in an html file), but CSS itself has no concept of a loop. — DBS, Dec 14 '18 at 14:50
I would separate them into their own file then you can use js to read the classes in the file and loop through and create an element with that class and append to the page: https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — Pete, Dec 14 '18 at 14:52
the pattern with class names is Test-Related-$variable, but this is copy pasted it doesn't appear nowhere else, it has no db or anything like that — Eriks, Dec 14 '18 at 14:54
@Eriks, your question is currently too broad for SO (and therefore off topic), I have given you an example of how to achieve what you are trying for, you need to go and attempt to do this yourself and if you get stuck with a specific coding problem, with the code you attempt, come back and ask another question — Pete, Dec 14 '18 at 14:58
Sure, ill be back once i have some questions or can specify the problem more. or if i succeed, then ill mark the Right answer :) — Eriks, Dec 14 '18 at 14:59

score 0 · Answer 1 · answered Dec 14 '18 at 15:29

Just a suggestion, but maybe you can use that kind of loop to output what you want :

var text = "";
var i;
for (i = 62209; i < 62214; i++) {
  text += '<i class="fa">' + String.fromCharCode(i) + '</i>';
}

document.getElementById("container").innerHTML = text;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div id="container"></div>

I used FontAwesome just to make the snippet work with an iconic font.

score 0 · Answer 2 · answered Dec 14 '18 at 18:01

And if you instead of putting each character in CSS, put in HTML, after all each has a class, then it's the same as writing everything in HTML.

You can pull a date attribute from HTML to use in CSS like this:

.Test-Related::before {
content: attr(data-character);
}

<!-- use &#x2764; instead of \u2764 -->
<i data-character="&#x2764;" class="Test-Related"></i>

The difference is that you have to use the notation in HTML instead of CSS (use & #x2764; instead of \u2764, for example), so you can only put one CSS call to all HTML elements, and then put each code character in HTML.

Foreach loop in css

2 Answers2