Pure CSS to achieve the first character of the string to achieve text Icon function

Time:2021-5-3

How to realize text icon 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 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

In this way, the basic effect is achieved, but it is still a little bit poor. How to follow text with icon background color

You can read thisJS extracts the color value according to the name

How to realize it? The following code is only used for the example of this article. The real 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", "common 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
document.write(html);
/**
 *Extract colors by name
 *@ param 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 results are as follows

Finally, the case code is attached

<!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", "common 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 colors by name
             *@ param 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>

summary

So far, this article about pure CSS to achieve the first character of the string to achieve the text Icon function is introduced here. For more related CSS to achieve the text Icon content, please search the previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]