Pure CSS to achieve the text icon function by taking the first character of the string

How to implement text icons through CSS

/*icon style*/
.nav-icon-normal {
    width: 32px;
    height: 32px;
    line-height: 33px;
    display: inline-block;
    border-radius: 6px;
    background-color: #b3b4c5;
    vertical-align: middle;
    overflow: hidden;
    font-size: 16px;
    text-indent: 8px;
    text-align: center;
    letter-spacing: 8px;
    color: #fff;
    word-break: break-all;
}

<div class="nav-icon-normal">Technology is the foundation</div>
<div class="nav-icon-normal">Ability is the key</div>
<div class="nav-icon-normal">Communication is the most important</div>
<div class="nav-icon-normal">General interface</div>

Effect Preview

This way the basic effect is achieved, but it’s still a little bit short. How to make the icon background color follow the text

You can read this Js to extract color values according to names

How to implement it? See here. The following code is only used as an example in this article. The actual use needs to be adjusted according to the actual situation.

var titles = ["Technology is the foundation", "Ability is the key", "Communication is the most important", "Universal interface"];
var html = "";
for (let i = 0; i < titles.length; i++) {
    const title = titles[i];
    const color = extractColorByName(title);
    html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
}
// Outputdocument.write(html);
/**
 * Extract color by name* @param name name*/
function extractColorByName(name) {
    var temp = [];
    temp.push("#");
    for (let index = 0; index < name.length; index++) {
        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
    }
    return temp.slice(0, 5).join('').slice(0, 4);
}

The effect after implementation is as follows

Finally, attach the case code

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*icon style*/
        .nav-icon-normal {
            width: 32px;
            height: 32px;
            line-height: 33px;
            display: inline-block;
            border-radius: 6px;
            background-color: #b3b4c5;
            vertical-align: middle;
            overflow: hidden;
            font-size: 16px;
            text-indent: 8px;
            text-align: center;
            letter-spacing: 8px;
            color: #fff;
            word-break: break-all;
        }
    </style>
</head>
 
<body>
    <script type="text/javascript">
        var titles = ["Technology is the foundation", "Ability is the key", "Communication is the most important", "Universal interface"];
            var html = "";
            for (let i = 0; i < titles.length; i++) {
                const title = titles[i];
                const color = extractColorByName(title);
                html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
            }
            // Output test HTML
            document.write(html);
            /**
             * Extract color by name* @param name name*/
            function extractColorByName(name) {
                var temp = [];
                temp.push("#");
                for (let index = 0; index < name.length; index++) {
                    temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
                }
                return temp.slice(0, 5).join('').slice(0, 4);
            }
               </script>
</body>
 
</html>

Summarize

This concludes the article on how to use pure CSS to implement text icon functions by taking the first character of a string. For more relevant CSS content on implementing text icons, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Share JS four fun hacker background effect codes

>>: How to embed other web pages in a web page using iframe