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

Solve the Linux Tensorflow2.0 installation problem

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

Solve the Linux Tensorflow2.0 installation problem

Detailed explanation of MySQL deadlock and database and table sharding issues

Detailed explanation of basic operation commands for Linux network settings

Solution to the problem that Docker container cannot access Jupyter

MySQL database constraints and data table design principles

Detailed explanation of the idea of implementing password display and hiding function in Vue

A brief discussion on VUE uni-app conditional coding and page layout

Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects

Vue batch update dom implementation steps

Summary of 7 reasons why Docker is not suitable for deploying databases

Recommend

Limit HTML text box input to only numbers and decimal points

Detailed explanation of FTP environment configuration solution (vsftpd)

Solve the MySQL 5.7.9 version sql_mode=only_full_group_by problem

Summary of essential Docker commands for developers

Tutorial on upgrading from Centos7 to Centos8 (with pictures and text)

How to set the height of the autosize textarea in Element UI

The latest super detailed graphic tutorial of installing Kali Linux on virtual machine VMware

Vue implementation example using Google Recaptcha verification

How to center images horizontally and vertically in DIV or DIV

Detailed explanation of Nginx timed log cutting

JavaScript implements displaying a drop-down box when the mouse passes over it

Detailed explanation of CSS to achieve the effect of illuminating the border by imitating the Windows 10 mouse

Detailed process of zabbix monitoring process and port through agent

The latest 36 high-quality free English fonts shared

How to deploy SpringBoot project using Docker