হরফ হরফ আইকন দেখাচ্ছে না

Question 1

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

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

সীমানা বর্গাকার বাক্সের পরিবর্তে কীভাবে আইকন প্রদর্শন করা যায় তা আমি জানতে চাই।

Question 2

আমার ক্ষেত্রে আমি আমার সিএস কোডে নিম্নলিখিত ভুল করেছি।

*{
    font-family: 'Open Sans', sans-serif !important;
}

এটি পুরো পৃষ্ঠার জন্য সমস্ত ফন্ট পরিবারের নিয়মগুলিকে ওভাররাইড করবে। আমার সমাধানটি কোডটির মতো শরীরে স্থানান্তরিত করা ছিল।

body{
    font-family: 'Open Sans', sans-serif;
}

নোট: আপনি যখনই !importantপতাকাটি CSS এ ব্যবহার করেন , একই উপাদান হিসাবে একই ধরণের ঘোষিত অন্য কোনও সিএস বিধি ওভাররাইড হয়ে যাবে।

Question 3

আপনি যখন খোলেন font-awesome.min.cssনীচের পথটি দেখতে পাবেন:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

এর অর্থ হ'ল আপনাকে ডিরেক্টরি তৈরি করতে হবে Fontsএবং তারপরে এই ফোল্ডারে ফাইল fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) অনুলিপি করতে হবে । এরপরে সবকিছু ঠিকঠাক কাজ করা উচিত।

Question 4

সচেতন থাকুন যে ফন্টের দুর্দান্ত সংস্করণ (5) দুর্দান্ত ব্যবহার করে "fas"বা উপসর্গের "fab"পরিবর্তে "fa"।

তাদের ওয়েবসাইট থেকে উদ্ধৃত:

এফএ উপসর্গটি 5 সংস্করণে অবচয় করা হয়েছে new

এ কারণেই আমার ফন্টগুলি ফাঁকা স্কোয়ার দেখাচ্ছে। এখন স্থির।

উদাহরণ কোড:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

দেখুন: https://fontawesome.com/icons/facebook-f?style=brands

Question 5

প্রথমে পরীক্ষা করুন যে আপনার ক্লাস = "এফএ" পাশাপাশি আইকনটির শ্রেণি যাই হোক না কেন। সুতরাং, না শুধুমাত্র

<i class="fa-pencil" title="Edit"></i>

কিন্তু

<i class="fa fa-pencil" title="Edit"></i>

তারপরে এটি প্রত্যাশার মতো কাজ করে। এটি আমার সমস্যা সমাধান করেছে।

Question 6

আপনার ফন্ট-অসাধারণ। CSS এর মত কোডগুলি খুলুন:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

আপনার অবশ্যই ফোল্ডারটি এর মতো থাকতে হবে:

font awesome -> css
 -> fonts

বা সবচেয়ে সহজ উপায়:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Question 7

আপনার CSSফাইলের পথটি সঠিক কিনা তা পরীক্ষা করে দেখুন। বরং নিখুঁত লিঙ্কগুলি পছন্দ করুন, তারা বুঝতে সহজতর যেহেতু আমরা জানি যে আমরা কোথা থেকে শুরু করি এবং অনুসন্ধান ইঞ্জিনগুলি সেগুলি আপেক্ষিক লিঙ্কগুলির চেয়েও পছন্দ করবে। এবং ব্যান্ডউইথ কমিয়ে আনার পরিবর্তে ফন্ট-অসাধারণ সার্ভারগুলির লিঙ্কটি ব্যবহার করুন:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

তবুও যদি আপনি এটি ব্যবহার করেন তবে আপনার সার্ভারে অতিরিক্ত ফন্টগুলি আপলোড করার প্রয়োজন হবে না এবং আপনি নিশ্চিত হবেন যে আপনি সঠিক CSSফাইলটি দেখিয়েছেন এবং তাত্ক্ষণিকভাবে আপনি সর্বশেষ আপডেটগুলি থেকেও উপকৃত হবেন।

Question 8

আমি একই সমস্যা নিয়ে কাজ করছিলাম তখন আমি এটি বুঝতে পেরেছিলাম আমাকে নতুন সংস্করণ (5 এবং আরও) ব্যবহার করতে হবে

এই সিডিএন ব্যবহার করুন এটি কাজ করবে।

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

Question 9

আমি একই সমস্যার মুখোমুখি ছিলাম .. সুতরাং ফন্টটি দুর্দান্ত ডাউনলোডের পরিবর্তে আমি আমার এইচটিএমএল কোডটিতে একটি লিঙ্ক যুক্ত করেছি এবং এটি কার্যকর হয়েছে।

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

স্নিপেট প্রসারিত করুন

Question 10

শুরু করার জন্য, আপনার এবং উভয়ই থাকা উচিত নয়font-awesome.css font-awesome.min.css

সাধারণত, font-awesome.cssবিকাশের সময় ব্যবহার করুন , তারপরে font-awesome.min.cssআপনি সাইটের সাথে খুশি হয়ে একবার স্যুইচ করুন ।

এর মতো সমস্যাগুলি প্রায়শই আপেক্ষিক পাথ এবং অবস্থানগুলির কারণে ঘটে থাকে, তাই আপনার এইচটিএমএল ফাইলটি CSS এর সাথে সম্পর্কিত কিনা তা পরীক্ষা করুন।

যদি আপনার এইচটিএমএল ফাইলটি বেস ডিরেক্টরিতে থাকে, এবং সিএসএসটি মূল ফোল্ডারে একটি সাবফোল্ডারে থাকে, আপনার প্রয়োজন হবে: href="./css/font-awesome.css"(একক সময়কাল)

Question 11

উপরের সমস্তটি সঠিক তবে আমার সমস্যাটির শীর্ষে ছিল যে আমি এফএ 5 এর বিনামূল্যে সংস্করণ ডাউনলোড করেছি যা নেই:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

আমি ভি 5 কাজ করতে পারিনি তাই উপরের পোস্টগুলির সহায়তায় আমি 4.7.0 এ ফিরে এসেছি এবং এটি আমার সমস্যাটি স্থির করেছে।

Question 12

আপনারা যারা এসসিএসএস এবং এনপিএম প্যাকেজ ব্যবহার করছেন তাদের জন্য এখানে আমার সমাধানটি দেওয়া হয়েছে:

npm i --save @fortawesome/fontawesome-free

তারপরে একটি এসসিএসএস ফাইলের শীর্ষে (আদর্শভাবে আপনার অ্যাপ্লিকেশনটির মূলে একটি এসসিএসএস ফাইল আমদানি করা):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';

Question 13

আমি তাদের সিডিএন এবং জাভাস্ক্রিপ্ট অন্তর্ভুক্ত ব্যবহার করে ফন্ট আশ্চর্যর সাথে সফলভাবে ইনস্টল করেছি ( এই পৃষ্ঠায় বর্ণিত হিসাবে )। তারপরে আমি কিছু লিগ্যাসি পৃষ্ঠায় এইচটিএমএল এবং সিএসএস অনুলিপি করার চেষ্টা করেছি এবং হঠাৎ আইকনগুলির পরিবর্তে খালি স্কোয়ার বক্সগুলি দেখতে পেলাম।

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

কোনও সমস্যা থাকলে আমি স্ট্রাইকআউটে ফন্টটি দেখার আশা করছিলাম ... তবে আমি সত্যিই আমার সমস্ত বিকল্পগুলি শেষ করে দিয়েছি তাই আমি গণিত শৈলীর চেক করে নিলাম এবং স্পষ্টভাবে দেখেছি যে ফন্ট আশ্চর্যর ফন্টটি অবশ্যই ব্যবহার হচ্ছে না। (নীচে রেন্ডার করা ফন্টটি দেখুন)

আমার লিগ্যাসি সিএসএস ফাইলটি একটি জগাখিচুড়ি ছিল এবং আমি এটিটি স্পর্শ না করা পছন্দ করি, তাই আমি এটি করে প্রতারণা করেছি - দয়া করে কাউকে বলবেন না :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

এছাড়াও লক্ষণীয়, আমি যখন ফন্ট আশ্চর্য সংস্করণ 4.7.0 থেকে সংস্করণ 5.4.1 এ আপগ্রেড করেছি তখন এই সমস্যাটি চলে গেল! আমি এই সেটআপ গাইড এবং এইচটিএমএল ব্যবহার করেছি

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>

Question 14

আমি ফন্টআউইজ প্রো ব্যবহার করছি এবং আমার জন্য সমাধানটি এর all.min.cssপরিবর্তে এম্বেড করা ছিল fontawesome.min.css।

Question 15

আমার মনে হয় আপনার মূল ফোল্ডারে ফন্ট ফোল্ডার নেই যেখানে সিএসএস ফোল্ডার থাকুন।

ডেমো

এবং সিএসএস ফোল্ডারটি এর মতো

এবং ফন্ট ফোল্ডার মত

আমি আশা করি এটি আপনার পক্ষে কাজ করবে।

তোমাকে ধন্যবাদ.

Question 16

আমার ক্ষেত্রে: আপনার প্রজেক্টের সিএসএস ফোল্ডারে আপনার পুরো ফন্ট-অসাধারণ ফোল্ডারটি অনুলিপি করতে হবে, কেবল ফন্ট-অসাধারণ min . মিন.এসএসএস ফাইল নয়।

Question 17

সুতরাং এটি style='font-weight:normal;'ফন্টটি যোগ করার বা অন্যথায় ফলের পরিবর্তন করে সরাসরি উপাদানটিতে .fas{font-weight:900}ফন্ট আশ্চর্যর সিএসএস ফাইলে সংজ্ঞাটিকে ওভাররাইড করে । আমি অনুমান করি যে ফন্টটি যে ফন্টের সাথে এটি কাজ করে তার মধ্যে নির্দিষ্ট সংজ্ঞা থাকে has মনে হচ্ছে এটি font-weightঅবশ্যই 501 থেকে 1000 এর মধ্যে সেট করা উচিত, অথবা ফন্টটি বর্গক্ষেত্রের মতো দেখাবে।

Question 18

আমার ইস্যুটি ছিল সবচেয়ে বেশি ভোট পেয়ে

*{
font-family: xxxxx
}

এটি সমস্যার সমাধান এটি পরিবর্তন

body{
font-family: xxxx
}

Question 19

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

স্নিপেট প্রসারিত করুন

Question 20

আইকন ফাইলগুলি সার্ভারে স্থানান্তর করতে আপনি একটি ভিসিএস (গিট বা সামসুছ) ব্যবহার করেছেন। গিট বলে:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

আপনাকে সম্ভবত আপনার ফন্টগুলি ঠিক করতে হবে।

Question 21

MacOS মোজাভে, আমার সাফারিতে এই সমস্যা ছিল। ফন্ট-দুর্দান্ত চিত্রগুলি ক্রোমে কাজ করেছিল তবে সাফারিতে নয়, তাই আমি নিশ্চিত যে এটি সাইটটি নয়।

আমি তাদের সাফারি মেনুতে অগ্রাধিকারগুলিতে গিয়ে এবং গোপনীয়তা ট্যাবটির অধীনে "ক্রস-সাইট ট্র্যাকিং প্রতিরোধ" নিষ্ক্রিয় / আনচেকিং করে রেন্ডার করতে পেরেছি।

কেন এটি স্থির করে তা নিশ্চিত নয়, তবে তা হয়ে গেল।

Question 22

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

উদাহরণস্বরূপ: বুটস্ট্র্যাপের ফন্ট-পরিবার 'ফন্টআউবাইজ' হরফ হ'ল ফন্ট-পরিবারে হরফ হ'ল ফন্ট-আশ্চর্যজনক 5 ফন্ট-ফাউন্ডে এবং আপনি চান আইকনের পরিবর্তে একটি সাদা বাক্স পাবেন।

এটি পরিচালনা করার আরও পরিষ্কার উপায় থাকতে পারে তবে আপনি যদি "হোয়াইট বক্স" সমস্যাটি সমাধান করার চেষ্টা করে চেকলিস্টে নামেন এবং এখনও এটি সনাক্ত করতে না পারেন (যেমন আমি করেছি) তবে এটিই উত্তর হতে পারে যা আপনি খুঁজছেন জন্য।

Question 23

5.10.1 সংস্করণ উপর ভিত্তি করে।

আমার সমাধান (স্থানীয়ভাবে):

আপনি যদি "fontawesome.css" বা "fontawesome.min.css" ব্যবহার করছেন তবে পরিবর্তে "all.css" ব্যবহার করার চেষ্টা করুন (সিএসএস ফোল্ডারে অবস্থিত)।
আপনি ডাউনলোড করেছেন যে ফন্টউইজ প্যাকেজ থেকে "সিএসএস" ফোল্ডার এবং "ওয়েবফন্টস" ফোল্ডারটি একে অপরের মতো সমান স্তরে থাকতে হবে।

আমার ক্ষেত্রে, আমার ইতিমধ্যে একটি সিএসএস ফোল্ডার ছিল তাই আমি স্রেফ ফন্টআউজ সিএসএস ফোল্ডারটির নামকরণ করে "সিএসএস-এফএ" রেখেছি।

আমার সিএসএস ফোল্ডারে "সিএসএস-এফএ" এবং "ওয়েবফন্ট" উভয়ই দিয়ে আপনার পাঠ্য সম্পাদককে এটিকে সঠিকভাবে সংযুক্ত করুন এবং এটির কাজ করা উচিত।

উদা: লিঙ্ক rel = "স্টাইলশিট" href = "সিএসএস / সিএসএস-এফএ / all.css"

Question 24

লক্ষ্যবস্তু! আমদানি * { ... } করা ফন্ট-পরিবার নির্বাচক থেকে পরিবর্তিত সমাধান! *:not(i) { ... }

(স্ক্যাস প্রিপ্রোসেসর সহ); আশা করি আপনি সমাধান করেছেন

Question 25

আমার ক্ষেত্রে, সমস্যাটি কিছু নিয়মিত শৈলী ( far) যা ফ্রি সেটে অন্তর্ভুক্ত করা হয়নি তা ব্যবহার করে হয়েছিল । fasএটি স্থির করতে পরিবর্তন করা হচ্ছে ।

Question 26

নীচের কোডটি হ'ল ফন্ট-দুর্দান্ত 70.70০.০। ফন্ট-দুর্দান্ত 5.11.2 এ যেতে, এখানে ক্লিক করুন ।

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

Question 27

আমি নিজে ফন্ট আশ্চর্যরূপে 5.13 হোস্ট করার জন্য এই টিউটোরিয়ালটি অনুসরণ করছিলাম।

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

কিছু কারণে আমি <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">লোড করতে পারিনি webfontsযে ফলস্বরূপ কেবল স্কোয়ারগুলি প্রদর্শিত হবে। কিন্তু যখন আমি <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>সমস্ত কিছু ব্যবহার শুরু করি তখন কাজ শুরু হয়। দুটি লিঙ্কই এইচটিএমএলে যুক্ত হয়েছিল <head>।

Question 28

আমি স্ক্যাস সহ 8 টি ড্রপল 8 এ ফা 5.0.13 যোগ করার চেষ্টা করছিলাম। শৈলগুলি ডিফল্টরূপে মূল ফাইলে অন্তর্ভুক্ত করা হয় না ss

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

Question 29

আপনার সিএসএস ফোল্ডারে ফন্ট-অসাধারণ ফাইল লাগাতে হবে এবং পরিবর্তন করতে হবে

href = "../ সিএসএস / ফন্ট-অসাধারণ। CSS" থেকে href = "সিএসএস / হরফ - দুর্দান্ত"

আর একটি জিনিস আপনি এই হরফ-অসাধারণ CSS ফাইলটি প্রতিস্থাপন করতে পারেন এবং এটি ব্যবহার করে দেখতে পারেন

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

স্নিপেট প্রসারিত করুন

Question 30

You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>