আইকন হরফ: তারা কীভাবে কাজ করবে?

Question

আমি বুঝতে পারি যে আইকন হরফগুলি হ'ল ফন্ট এবং আপনি কেবল তাদের শ্রেণীর নাম কল করে আইকনগুলি পেতে পারেন, তবে আইকন ফন্টগুলি কীভাবে কাজ করবে?

আইকন ফন্টগুলি কীভাবে আইকন প্রদর্শন করে (সাধারণ ফন্টের তুলনায়) Chrome এ লোড করা সম্পর্কিত আইকন হরফ সংস্থানগুলি যাচাই করার চেষ্টা করেছি তবে কীভাবে এটি ঘটে তা বুঝতে পেরেছি।

আইকন ফন্টের প্রচুর পরিমাণে উপলব্ধ থাকা সত্ত্বেও, এই "আইকন ফন্ট কৌশল" কীভাবে করা হয় তার সংস্থানগুলি খুঁজতে আমিও ব্যর্থ হয়েছি । আইকন ফন্টগুলি কীভাবে সংহত করা যায় তা দেখানোর জন্য প্রচুর সংস্থান রয়েছে , তবে কীভাবে এটি করা হয় সে সম্পর্কে কেউ ভাগ করে নিচ্ছেন বা লিখছেন বলে মনে হয় না !

Answer 1

Glyphicons হয় ইমেজ এবং না একটি ফন্ট। সমস্ত আইকন একটি স্প্রিট চিত্রের মধ্যে পাওয়া যায় (স্বতন্ত্র চিত্র হিসাবেও উপলব্ধ) এবং সেগুলিকে অবস্থিত হিসাবে উপাদানগুলিতে যুক্ত করা হয় backround-image:

প্রকৃত ফন্ট আইকন ( FontAwesome , উদাহরণস্বরূপ) না একটি নির্দিষ্ট ফন্ট এবং এর ব্যবহার করতে ডাউনলোড করার জড়িত contentসম্পত্তি, উদাহরণস্বরূপ:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

হিসাবে contentসম্পত্তি সমর্থিত নয় পুরোনো ব্রাউজারে, এই এছাড়াও ব্যবহার করতে চিত্র ।

ফন্ট হিসাবে ব্যবহারে সম্পূর্ণ কাঁচা ফন্টআউবাইজের একটি উদাহরণ এখানে দেওয়া, ( - আপনি এটি দেখতে সক্ষম হতে পারেন না) একটি অ্যাম্বুলেন্সে পরিণত করেছেন: http://jsfiddle.net/GWqcF/2

Comments

FontAwesome আইকন হয় ফন্ট। এমনকি আমি আমার উত্তরে ফন্টআউজওয়ের উল্লেখ করেছি এবং তারা কীভাবে ব্রাউজারগুলি পরিচালনা করে যা পৃষ্ঠাগুলিতে আইকনগুলি যুক্ত করার জন্য তাদের সিএসএস পদ্ধতি সমর্থন করে না say

— জেমস ডোনেলি

আইকনগুলি হরফের অক্ষর। অপরিশোধিত উদাহরণ হিসাবে: "জেড" অক্ষরটি স্যুটকেসের মতো দেখতে ডিজাইন করা যেতে পারে, ফন্ট হিসাবে সংরক্ষণ করা হয়েছিল এবং তার পরে কোনও ওয়েবসাইটে ব্যবহার করা যেতে পারে।

— জেমস ডোনেলি

ব্যবহারের ক্ষেত্রে সম্পূর্ণ কাঁচা ফন্টআউজের উদাহরণ এখানে রয়েছে, অ্যাম্বুলেন্সে রূপান্তরিত : jsfiddle.net/GWqcF/2

— জেমস ডোনেলি

@ বিবেকচন্দ্র ঠিক আছে! :-) আইকন ফন্টগুলি হ'ল অন্য ফন্টের মতো, অক্ষরগুলি আইকনের মতো দেখতে স্টাইল করা হয়। ফন্টআউইজ "ব্যক্তিগত ব্যবহার" এর জন্য সংরক্ষিত অক্ষরের একটি ব্যাপ্তি ব্যবহার করে ।

— জেমস ডোনেলি

অসাধারণ. সমস্ত সংস্থানগুলির জন্য ধন্যবাদ - এটি সন্ধান করবে, জিনিসগুলি এখন আরও স্পষ্ট r

— বিবেক চন্দ্র

Answer 2

যদি আপনার প্রশ্নটি হয় যে কোনও সিএসএস বর্গ কীভাবে একটি নির্দিষ্ট অক্ষর ( োকাতে পারে (যেটি বিশেষ ফন্টে একটি আইকন হিসাবে উপস্থাপিত হবে), ফন্টআউবাইজের উত্সটি একবার দেখুন :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

সুতরাং একটি সিএসএস বিষয়বস্তু নির্দেশিকাটি চরিত্রটি সন্নিবেশ করানোর জন্য ব্যবহৃত হয় (এটি ইউনিকোডের একটি বিশেষ ব্যক্তিগত-ব্যবহারের সংরক্ষিত অঞ্চল যা অন্য পাঠকদের গোলযোগ না করে)।

Comments

স্ল্যাশ চ এর অর্থ কী?

— কোডি বাগস্টাইন

fএটা অংশ নয়, এটা শুধু হেক্স সংখ্যা 15 ব্যাকস্ল্যাশ একটি হেক্সাডেসিমেল কোডপয়েন্ট জন্য এস্কেপ সিকোয়েন্সের শুরু করে। \f004সিএসএস এ এইচটিএমএল মত হয়।

— থিলো

Answer 3

ওয়েবফন্ট আইকনগুলি কীভাবে কাজ করে?

ওয়েব-ফন্ট আইকনগুলি কনটেন্টের সম্পত্তি ব্যবহার করে এইচটিএমএলে একটি নির্দিষ্ট গ্লাইফ ইনজেক্ট করার জন্য সিএসএস ব্যবহার করে কাজ করে। এরপরে এটি @font-faceএকটি ডিংব্যাট ওয়েবফন্ট লোড করতে ব্যবহার করে যা ইনজেকশনযুক্ত গ্লাইফকে স্টাইল করে। আপশটটি হ'ল যে ইঞ্জেকশনযুক্ত গ্লাইফটি পছন্দসই আইকন হয়ে যায়।

শুরু করার জন্য, আপনার প্রয়োজনীয় আইকনগুলির সাথে একটি ওয়েব-ফন্ট ফাইলের প্রয়োজন হবে যা নির্দিষ্ট ASCIIঅক্ষরগুলির জন্য নির্দিষ্ট করা হয়েছে (A, B, C, !, @, #, etc.)বা ইউনিকোড ফন্টের ব্যক্তিগত ব্যবহারের ক্ষেত্রে, যা ফন্টে ফাঁকা রয়েছে যা নির্দিষ্ট অক্ষর দ্বারা ব্যবহৃত হবে না ইউনিকোড এনকোডড ফন্ট।

আরও পড়ুন, কীভাবে প্রতিক্রিয়াশীল ওয়েবফন্ট আইকনগুলিতে ওয়েবফন্ট আইকন তৈরি করবেন ।