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

HTML+CSS to achieve the special effects code of the blood-sharingan and samsara eye

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

HTML+CSS to achieve the special effects code of the blood-sharingan and samsara eye

How to implement remote access control in Centos 7.4

A brief discussion on the types of node.js middleware

Vue uses the video tag to implement video playback

Nginx load balancing configuration, automatic switching mode when downtime occurs

Summary of principles for writing HTML pages for emails

CSS style to center the HTML tag in the browser

HTML Basics - Simple Example of Setting Hyperlink Style

Write a React-like framework from scratch

Example of implementing grouping and deduplication in MySQL table join query

Recommend

HTML6 implements folding menu and accordion menu example code

WeChat applet wxs date and time processing implementation example

base target="" specifies the target of the base link to open the frame

Tutorial on installing MYSQL8.X on Centos

Detailed explanation of the differences between js array find, some, filter, and reduce

Detailed explanation of the rounding accuracy problem of the toFixed() method in JS

WeChat applet canvas implements signature function

About front-end JavaScript ES6 details

MySql sets the specified user database view query permissions

Installation of mysql-community-server. 5.7.18-1.el6 under centos 6.5

Jmeter connects to the database process diagram

Html long text automatically cuts off when it exceeds the tag width

Detailed explanation of simple html and css usage

The url value of the src or css background image is the base64 encoded code

How to deploy Angular project using Docker