टेक्स्ट छुपाएं, आइकन तत्वों को छोड़ दें

Question

मेरे पास अब एक बहुत बड़ी साइट है, और यह सभी बटनों के कोड बदलने के लिए समय लेने वाला होगा, इसलिए मुझे आश्चर्य है कि क्या सीएसएस मेरे लिए कुछ HTML कोड परिवर्तन नहीं कर सकता ।

प्रत्येक पृष्ठ में कुछ बटन के साथ एक एक्शन बार होता है, जिसमें सभी आइकन और टेक्स्ट होते हैं। कुछ इस तरह:

<div class="action-bar"> 
    <a href="" class="btn btn-primary"> 
     <i class="fa fa-icon"></i> 
     Button label 
    </a> 
    <a href="" class="btn btn-primary"> 
     <i class="fa fa-icon"></i> 
     Button label 
    </a> 
</div> 

अब मैं क्या हासिल करना चाहता हूं, यह है कि मोबाइल उपकरणों पर, बटन के अंदर का पाठ प्रदर्शित नहीं होगा; केवल आइकन प्रदर्शित होना चाहिए।

अगर मैं इस तरह एक मार्कअप था:

<a href="" class="btn btn-primary"> 
    <i class="fa fa-icon"></i> 
    <span class="label">Button label</label> 
</a> 

तो मैं जानता हूँ कि मैं ऐसा करने से सभी लेबल को छिपाने सकता है:

@media(max-width:768px) { 
    .btn .label { 
     display: none; 
    } 
} 

मैं तो क्या सोच रहा हूँ है, है वहाँ एक शुद्ध सीएसएस इसके बराबर है, लेकिन पहले एचटीएमएल मार्कअप के साथ जहां span.label नहीं है?

Answer 1

आप शून्य करने के लिए फ़ॉन्ट आकार सेट कर सकते हैं:।

.btn { font-size: 0; } 

अपने माउस पाठ है, तो उनकी फ़ॉन्ट आकार के ऊपर लिख:

.fa { font-size: initial; } 

Answer 2

आप उपयोग कर सकते हैं:

@media(max-width:768px) { 
    .btn { 
     color: transparent; 

    } 
    .btn > .fa{ 
     color: black; //or color of your choice 
    } 
} 

यह पाठ छिपाने होगा, लेकिन यह बटन के आकार के साथ सौदा नहीं करता है।

यदि आप आइकन के आकार को जानते हैं, तो आप उस आकार को .btn एस पर मजबूर कर सकते हैं और फिर अपने आइकन पर position:absolute;top:0;left:0;z-index:1; का उपयोग कर सकते हैं।

Answer 3

माउस की चौड़ाई मान लिया जाये कि 1em, आप

/* just to make the icon visible */ 
 
.fa.fa-icon { 
 
    display:inline-block; 
 
    width:1em; height:1em; 
 
    background:orange; 
 
} 
 

 
a { 
 
    display:inline-block; 
 
    width: 1em; /* set to same as icon */ 
 
    color:white; /* set to same as background */ 
 
    overflow:hidden; 
 
}

<div class="action-bar"> 
 
    <a href="" class="btn btn-primary"> 
 
     <i class="fa fa-icon"></i> 
 
     Button label 
 
    </a> 
 
    <a href="" class="btn btn-primary"> 
 
     <i class="fa fa-icon"></i> 
 
     Button label 
 
    </a> 
 
</div>

की तरह कुछ कर सकते हैं (जहां नारंगी वर्गों प्रतीक हैं, मैं पूरा FontAwesome सहित की तरह महसूस नहीं किया था , तो मैं यह थोड़ा नकली पड़ा)