मैं इस फ़ॉन्ट आइकन 45 डिग्री घुमाएगा। आइकन इस सीएसएस (सभी सीएसएस कम के माध्यम से संकलित) है:मैं फ़ॉन्ट आइकन 45 डिग्री कैसे घुमा सकता हूं?

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { 
    font-family: Flaticon; 
    font-size: 20px; 
    font-style: normal; 
    margin-left: 20px; 
}

और यह इस Flaticon है: http://www.flaticon.com/free-icon/hand-pointer_70655

मैं एक आइकन फ़ॉन्ट के रूप में इसे स्थापित कर लेंगे।

हालांकि, जब मैं इसे 45 डिग्री घुमाने की कोशिश करता हूं, ताकि उंगली शीर्ष दाएं कोने पर इंगित करे, यह काम नहीं करता है। मैं बहुत की तरह आइकन स्थापित करके कोशिश कर रहा हूँ:

<i class="flaticon-hand-10 gly-rotate-45"></i>

इस कहां वर्ग gly-rotate-45 है:

.gly-rotate-45 { 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
}

ब्राउज़र उठा transform: rotate(45deg);, लेकिन आइकन घुमाया नहीं है। मैं इस आइकन फ़ॉन्ट को कैसे घुमा सकता हूं?

स्रोत

2015-06-12 YPCrumble

आइकन 'कच्चे' राज्य में घुमाए जाने का कारण यह नहीं है क्योंकि यह डिफ़ॉल्ट है display सेटिंग inline है।

आप इस तरह के इनलाइन तत्वों में परिवर्तन लागू नहीं कर सकते हैं।

समस्या को हल करने के लिए बस लागू `प्रदर्शन: इनलाइन-ब्लॉक"

@font-face { 
 
    font-family: 'Flaticon'; 
 
    src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 
[class^="flaticon-"]:before, 
 
[class*=" flaticon-"]:before, 
 
[class^="flaticon-"]:after, 
 
[class*=" flaticon-"]:after { 
 
    font-family: Flaticon; 
 
    font-size: 20px; 
 
    font-style: normal; 
 
    margin-left: 20px; 
 
} 
 
.flaticon-hand-10:before { 
 
    content: "\e000"; 
 
} 
 
.gly-rotate-45 { 
 
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    display: inline-block; 
 
}

<i class="flaticon-hand-10 gly-rotate-45"></i>

।

स्रोत

2015-06-13 06:29:56

समस्या

सामग्री (अर्थात आइकन) सीएसएस द्वारा जोड़ा जा रहा है और अपने आप ही घुमाया नहीं जा सकता है।

एक और तत्व में तत्व समाहित और है कि एक बारी बारी से (मैं सटीक कारण खोजने की कोशिश कर रहा हूँ, लेकिन मैं यह पहचानने में कठिनाई अगर यह विशिष्ट या नहीं ब्राउज़र है हो रही है।)

समाधान। आपको आकार सीमाएं भी सेट करने की आवश्यकता होगी अन्यथा इसमें कठोर परिणाम हो सकते हैं जिन्हें आप नहीं चाहते हैं।

@font-face { 
 
    font-family: 'Flaticon'; 
 
    src: url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTWzLl7IAAAV4AAAAHEdERUYAMQAGAAAFWAAAACBPUy8yL7pL5QAAAVgAAABWY21hcMARI74AAAHAAAABSmdhc3D//wADAAAFUAAAAAhnbHlmwP2S0wAAAxgAAABwaGVhZARhaP0AAADcAAAANmhoZWED0gHFAAABFAAAACRobXR4BgAAHgAAAbAAAAAQbG9jYQA4AAAAAAMMAAAACm1heHAARwAoAAABOAAAACBuYW1liNt9UwAAA4gAAAGScG9zdJJ3apwAAAUcAAAAMQABAAAAAQAAIRWaJV8PPPUACwIAAAAAANGhFEAAAAAA0aEUQAAe/8AB4gHAAAAACAACAAAAAAAAAAEAAAHA/8AALgIAAAAAAAHiAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEACUAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADgAAHA/8AALgHAAEAAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAHgAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAgAA4AD//wAAAADgAP//AAAgAwABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAEAHv/AAeIBwAAkAAAlIgcuASMiBy4BIyIHNTQmIgYdAScuAQ4BHwEeATsBMjY9ATQmAa0ODQMdExANBRsRDgwfLB8SDyshAg5zEjYYcS9CH9sHEhgIDxMIexYfHxbtFRADHSwQgRIaOyqBFh8AAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGYAbABhAHQAaQBjAG8AbgAgADoAIAAxADMALQA2AC0AMgAwADEANQAARm9udEZvcmdlIDIuMCA6IGZsYXRpY29uIDogMTMtNi0yMDE1AABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABmAGwAYQB0AGkAYwBvAG4AAGZsYXRpY29uAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAAEAAgECBmhhbmQxMAAAAAAAAAH//wACAAEAAAAOAAAAGAAAAAAAAgABAAMAAwABAAQAAAACAAAAAAABAAAAAMmJbzEAAAAA0aEUQAAAAADRoRRA') format('truetype'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 
[class^="flaticon-"]:before, 
 
[class*=" flaticon-"]:before, 
 
[class^="flaticon-"]:after, 
 
[class*=" flaticon-"]:after { 
 
    font-family: Flaticon; 
 
    font-size: 20px; 
 
    font-style: normal; 
 
    margin-left: 20px; 
 
} 
 
.flaticon-hand-10:before { 
 
    content: "\e000"; 
 
} 
 
.gly-rotate-45 { 
 
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 
p { 
 
    max-width: 40px; 
 
    max-height: 40px; 
 
}

<p class="gly-rotate-45"> 
 
    <i class="flaticon-hand-10"></i> 
 
</p>

अभी के लिए, कि मेरे समाधान है, लेकिन यह भद्दा लगता है और मैं एक बेहतर जवाब की जांच के लिए जारी रहेगा।

स्रोत

2015-06-13 00:07:05 Ally

मैं फ़ॉन्ट आइकन 45 डिग्री कैसे घुमा सकता हूं?

उत्तर

समस्या

संबंधित मुद्दे