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

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

Recommend

Detailed steps for installing and using vmware esxi6.5

Table of contents Introduction Architecture Advan...

Solve the problem of inconsistency between mysql time and system time in docker

Recently, when I installed MySQL in Docker, I fou...

How to create a MySQL master-slave database using Docker on MacOS

1. Pull the MySQL image Get the latest MySQL imag...

How to deploy Vue project using Docker image + nginx

1. Packaging Vue project Enter the following name...

Tutorial on building svn server with docker

SVN is the abbreviation of subversion, an open so...

Detailed explanation of the whole process and steps of installing clion on Ubuntu16.04

Explain the whole process of CLion from scratch. ...

Detailed introduction to the MySQL installation tutorial under Windows

Table of contents 1. Some concepts you need to un...

Implementation of Vue package size optimization (from 1.72M to 94K)

1. Background I recently made a website, uidea, w...

How to automatically backup the script for Linux servers (mysql, attachment backup)

1. Create the backup.sh script file #!/bin/sh SOU...

Detailed explanation of custom instructions for Vue.js source code analysis

Preface In addition to the default built-in direc...

MySQL database terminal - common operation command codes

Table of contents 1. Add users 2. Change the user...

How to deploy springcloud project with Docker

Table of contents Docker image download Start mys...

Javascript closure usage scenario principle detailed

Table of contents 1. Closure 2. Closure usage sce...

How to implement a single file component in JS

Table of contents Overview Single file components...

6 ways to view the port numbers occupied by Linux processes

For Linux system administrators, it is crucial to...