ফন্ট দুর্দান্ত কাজ করছে না, আইকনগুলি স্কোয়ার হিসাবে দেখায়

224

সুতরাং আমি একটি বিপণনের পৃষ্ঠাটি প্রোটোটাইপ করার চেষ্টা করছি এবং আমি বুটস্ট্র্যাপ এবং নতুন ফন্ট অসাধারণ ফাইলটি ব্যবহার করছি। সমস্যাটি হ'ল আমি যখন একটি আইকন ব্যবহার করার চেষ্টা করি তখন পৃষ্ঠাটিতে যা কিছু রেন্ডার হয় তা বড় স্কোয়ার।

আমি ফাইলগুলিকে মাথায় কীভাবে অন্তর্ভুক্ত করব তা এখানে:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

এবং এখানে আইকনটি ব্যবহার করার চেষ্টা করার একটি উদাহরণ আমার কাছে রয়েছে:

<i class="icon-camera-retro"></i>

তবে যা একটি বড় স্কোয়ারে রেন্ডার হয়। কেউ কি জানেন যে কি হতে পারে?

— কনার ব্ল্যাক
সূত্র

1

আপনি ফন্ট আমদানি করছেন?

— মেহওয়ার

1

সম্ভবত না. আমি ভেবেছিলাম আপনার কেবল .cssফাইলটি অন্তর্ভুক্ত করতে হবে।

— কনার ব্ল্যাক

2

শিরোনামটি বোঝায় যে সমস্যাটি ক্রোমের সাথে নির্দিষ্ট। এটি অন্যান্য ব্রাউজারগুলিতে লোড হচ্ছে বা রেফারেন্সড ফন্ট ফাইলটি 404-এ পরিণত হচ্ছে?

— সিমনম্যান

1

আগস্ট ২০১ of পর্যন্ত উপরের লিঙ্কে ৩ য় পদক্ষেপ খুঁজে পাচ্ছেন না ... কোনও পুনর্নির্দেশ ??

— সৌরভ তিওয়ারি

1

সম্ভবত আপনি ওয়েবফন্ট ফোল্ডারটি অনুলিপি করেছেন?

— এনটাইটেল করুন

149

ডকুমেন্টেশন (পদক্ষেপ 3) অনুসারে আপনার সরবরাহকৃত সিএসএস ফাইলটি আপনার সাইটে ফন্টের অবস্থানের দিকে নির্দেশ করতে হবে।

— mayhewr
সূত্র

5

দুর্দান্ত উত্তর, কেবল কিছু অতিরিক্ত তথ্য দেওয়ার জন্য, আপনি ফন্টগুলি সিএসএসের দ্বারা প্রদত্ত ডিফল্ট পথে রাখতে পারেন, কেবল ফন্ট-অসাধারণ সিএসএস খুলুন এবং আপনি নিম্নলিখিত এন্ট্রিটি দেখতে পাবেন: @ ফন্ট-ফেস {ফন্ট-পরিবার: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: URL ( '../ ফন্ট / fontawesome-webfont.eot # iefix & V = 3.2.1?')

— Braulio

1

কেবল ভবিষ্যতের এএসপি.নেট এমভিসি পাঠকদের জন্য একই সমস্যা: আপনার যদি সমস্ত ফোল্ডার সঠিক জায়গায় থাকে তবে আপনি এখানে ওয়েব পয়েন্ট হিসাবে মাইমে টাইপ যুক্ত করেছেন কিনা তা যাচাই করুন: stackoverflow.com/questions/4015816/…

— jpgrassi

1

আপনি যদি ফন্টের বেস 64 সংস্করণ (সহজেই অনলাইনে রূপান্তর করতে পারেন) এর সাথে ডেটা ইউআরআই স্কিম ব্যবহার করেন, তবে আপনাকে সঠিক ফাইল পাথ এবং রিসোর্স হোস্টিং সম্পর্কে চিন্তা করতে হবে না।

— রেনেসাঁস প্রোগ্রামগ্রাম 19

দ্রষ্টব্য : আপনি যদি সিএসএস সংশোধন করতে না চান, কেবল একই ফোল্ডারে CSS এবং ফন্টগুলি রাখুন, এটি দেখুন

— শায়েজুত

7

@ টুটুকা: প্রত্যেকে সিডিএন ব্যবহার করতে পারে না।

— অরবিটে হালকা ঘোড়দৌড়

188

আপনি 2 ক্লাস, থাকতে হবে faবর্গ এবং ক্লাস যে শনাক্ত পছন্দসই আইকন fa-twitter, fa-searchইত্যাদি ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

— নাবিল কাদিমি
সূত্র

4

এটি শীর্ষস্থানীয় উত্তর হওয়া উচিত, সিএসএস হ'ল ফন্ট ফাইলগুলির জন্য সঠিক স্থানে পয়েন্ট সরবরাহ করেছিল যতক্ষণ আপনি সেগুলি সরাবেন না - এটি আমাকে দেয়ালটি

— চালাচ্ছিল

5

দ্রষ্টব্য: "এফএ উপসর্গটি 5 সংস্করণে অবচিত করা হয়েছে The নতুন ডিফল্টটি ব্র্যান্ডগুলির জন্য দ্রুত শক্ত শৈলী এবং ফ্যাব স্টাইল।"

— তেরজে সোলেম

1

এটি আমার জন্য এটি স্থির! আমি প্রাইমংয়ের সাথে কৌণিক (5 আমি মনে করি) ব্যবহার করছি এবং মনে হচ্ছে, ফন্ট-দুর্দান্তটি ইতিমধ্যে xx.componal.ts এর ভিতরে মেনুআইটেম-সংজ্ঞাগুলির জন্য কাজ করেছে (আইকনগুলি সঠিকভাবে রেন্ডার করেছে)। তবে যখন xx.component.html কিছু (একটি আইকন সহ উদাঃ P-বোতাম) যোগ, এক হয়েছে যোগ ফার্সী বর্গ এবং fa- <যাই হোক না কেন আইকন>!

— ইগোর

1

@ টারজেসোলিম আপনার দেওয়া তথ্যটি অত্যন্ত গুরুত্বপূর্ণ। এটি আমার সমস্যার সমাধান করেছে। যেহেতু আমি পুরানো সংস্করণটি ব্যবহার করছিলাম তবে "দ্রুত" ধন্যবাদ ব্যবহার

— করছিলাম

♂️‍♂️ অনেক অনেক ধন্যবাদ! আমি ওপেন আইকনগুলি ওআই ওআই -... সহ প্রথম পেয়েছি o

— আলেকজান্দ্র

54

এটা ব্যবহার কর

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

আমাজন ক্লাউডফ্রন্ট সিডিএন-তে আমার একই সমস্যা ছিল তবে আমি ম্যাক্সসিডিএন থেকে লোড করা শুরু করার পরে এটি সমাধান হয়ে যায়

— কুমার দীপম
সূত্র

6

এটি ধরে নিয়েছে যে আপনি ফন্ট-অসাধারণ সিডিএন ব্যবহার করতে চান। বাণিজ্যিক উত্পাদন পরিবেশের জন্য আমি এটি করব না।

— জে এডওয়ার্ডস

48

এটি আপনাকে সাহায্য করতে পারে তা অন্বেষণ করে আইকনের ফন্ট পরিবারকে পরিবর্তন করেন নি তা পরীক্ষা করে দেখুন । যদি আপনি .fa আইটেমের ফন্টের পরিবারটি থেকে পরিবর্তন করেছেন: ফন্টআউইউজ আইকনটি প্রদর্শিত হবে না। এটি সর্বদা নির্বোধ এবং ছোট কিছু।

আশা করি যে কাউকে সাহায্য করবে।

— Bren1818
সূত্র

11

লোটোখেলা! অনেক ধন্যবাদ. মেট্রো-ইউআই হ'ল ফন্ট-দুর্দান্ত ফন্ট-পরিবারকে ওভাররাইড করছে। আমাকে এটি যুক্ত করতে হয়েছিল: .ফ {ফন্ট-পরিবার: 'ফন্টআউবিজ'! গুরুত্বপূর্ণ; } তাহলে এটি কাজ করে।

— ডেবি এ

1

হাঁ। নির্বোধ এবং ছোট। এটি - অন্য কোনও কিছুর জন্য ফন্ট পরিবর্তন করা এবং ফন্টউইজ আইকনগুলিকে প্রভাবিত করে - আমার কাছে এতবার ঘটেছিল যে এটি বোকা হয়ে উঠছে।

— এড

2

হ্যাঁ - এই লাইনটি দোষারোপ করা হয়েছিল (আরও নির্দিষ্ট করে বলার জন্য, গুরুত্বপূর্ণ নিয়মটি): * {ফন্ট-পরিবার: 'উত্স সানস প্রো'! গুরুত্বপূর্ণ}

— স্বেত

1

কোনও সমস্যার সন্ধানে সময় হারাতে এড়াতে এটি হরফ হ'ল ফন্ট ব্যবহার করার জন্য এটি সর্বাধিক গুরুত্বপূর্ণ এবং দরকারী পরামর্শ।

— দেজ

22

আপনি যদি কম বা SASS ব্যবহার করে থাকেন তবে হরফ-অসাধারণ / সাস ফাইলটি খুলুন এবং পাথ ভেরিয়েবলটি সম্পাদনা করুন @fa-font-path: "../font";যা প্রকৃত ফন্টগুলিতে নির্দেশ করে:

@fa-font-path: "../font";

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

আপনি @ ফন্ট-মুখের ঘোষণার ব্লকে পাথ সম্পাদনা করা ব্যতীত সিএসএসের সাথে একই:

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

— jonschlinkert
সূত্র

সেগুলির পরিবর্তে কেবলমাত্র নির্দিষ্ট আইকন আমদানির কোনও উপায় আছে? আমি কেবল আমার সিএসএস ফাইলটি কয়েকটি আইকনগুলিতে সংকলন করতে চাই।

— ব্যবহারকারী 805981

@fa-font-path: "../fonts";আমার জন্য কাজ। (অনুপস্থিত sযোগ করুন লক্ষ্য করুন )

— প্রগ্রেহামার

18

আপনার ফন্ট-awesome.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">

— এরগা কাণ্ডলি
সূত্র

13

আমি পূর্ববর্তী কয়েকটি সমাধান দিয়ে একই সমস্যাটি সমাধান করার চেষ্টা করেছি, তবে তারা আমার পরিস্থিতিতে কাজ করে নি। অবশেষে, আমি এই 2 টি লাইনগুলি হেডে যুক্ত করেছি এবং এটি কাজ করেছে:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">

— ভোজকান সিভিজনোভিচ
সূত্র

12

আমি এখানে বর্ণিত ম্যাক্সসিডিএন কাজFont Awesome 4.3.0 থেকে লিঙ্কিং ব্যবহার করছি ,

তবে আপনার সার্ভারে হোস্ট করার জন্য একই ফোল্ডারে ফন্ট এবং সিএসএস লাগানো আমার পক্ষে এইভাবে কাজ করেছে

এখানে চিত্র বর্ণনা লিখুন

তারপরে কেবল সিএসএস লিঙ্ক করুন:

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

আশা কাউকে সাহায্য করে

— shaijut
সূত্র

8

আপনার অবশ্যই ২ টি ক্লাস থাকতে হবে, ফাস্ট ক্লাস এবং এফএ ক্লাস, সম্ভবত এটি কাজ করবে:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>

— ইস্রায়েল
সূত্র

3

এটি উপলব্ধি করতে পারেনি - ভি 5 থেকে তাদের এখন ক্লাসের পরিবর্তে একটি fabবা fasশ্রেণীর প্রয়োজন fa।

— এচিলন

7

আমার এই সমস্যা ছিল। সমস্যাটি হ'ল আমার সাথে একটি ফন্ট-পরিবার সিএসএস স্টাইল ছিল!

— জনি হোয়াইট
সূত্র

আমার একই সমস্যা ছিল * * ফন্ট-পরিবার নিয়ে: হেলভেটিকা, সানস-সিরিফ! গুরুত্বপূর্ণ; }

— ডাব্বো

6

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

যদি আপনি নিম্নলিখিত ফাইল কাঠামোতে উদাহরণস্বরূপ আপনার ফাইল স্থাপন করেন

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

চেক 1) ফন্ট ফাইলগুলি সঠিকভাবে লোড করার জন্য আপনি কি প্যাকেজ রিসোর্স গার্ডটি সঠিকভাবে ব্যবহার করছেন?

আপনার শ্রেণীর উদাহরণ যা ওয়েব অ্যাপ্লিকেশন প্রসারিত করে:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

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

বিশেষত যদি আপনি মাভেন ব্যবহার করছেন তবে রিসোর্স ফিল্টারিং সম্পর্কে সচেতন হন। আপনার / ফন্টের ফাইলগুলি যেখানে রয়েছে সেই ফোল্ডারটি ফিল্টার করবেন না - অন্যথায় তারা দূষিত হবে।

আপনার pom.xML থেকে উদাহরণ

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

উপরের উদাহরণে আমরা src / main / java ফোল্ডারটি ফিল্টার করি না, যেখানে CSS এবং ফন্ট ফাইল রয়েছে।

বাইনারি ডেটা ফিল্টারিং সম্পর্কিত আরও তথ্যের জন্য দয়া করে ডকুমেন্টেশনও দেখুন:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

বিশেষত ডকুমেন্টেশন সতর্ক করে: " সতর্কতা: চিত্রগুলির মতো বাইনারি সামগ্রী দিয়ে ফাইলগুলি ফিল্টার করবেন না! এর ফলে সম্ভবত দুর্নীতি আউটপুট আসবে resources প্রথম সংস্থান সেট ফিল্টার করার জন্য ফাইলগুলি সংজ্ঞায়িত করে এবং অন্যান্য সংস্থান সেটটি অপরিবর্তিত অনুলিপি করতে ফাইলগুলি সংজ্ঞায়িত করে ... "

— ফিলিপ
সূত্র

6

আমার এই সমস্যাটি ছিল এবং প্রতিটি পদক্ষেপটি সাবধানতার সাথে অতিক্রম করেছি ... যদিও আমি যুগে যুগে এফএ ব্যবহার করছি ... এবং তখন আমি বুঝতে পারি আমার মেইল সিএসএস ফাইলে আমার এই লাইনটি ছিল:

* {
font-family: Arial !important;
}

বোকা ভুল, তবে এটি ভবিষ্যতে কাউকে বোঝাতে পারে!

— জে ডো
সূত্র

4

নতুন সংস্করণ 3.0.০ এ এটি আরও সহজ হওয়া উচিত। বুটস্ট্র্যাপ সিডিএন-তে নির্দেশ করা সবচেয়ে সহজ: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

— হরফ হরফ
সূত্র

4

যদি আপনি শিরোলেখে ফিরে আসবে অ্যাক্সেস-নিয়ন্ত্রণ-মঞ্জুর করুন বংশোদ্ভূত করতে * আপনার ফন্ট ফাইলে

— tronic
সূত্র

2

একদম ঠিক! আপনার ফন্টটি দুর্দান্ত ফাইলগুলি পরিবেশন করতে তৃতীয় পক্ষের সরবরাহকারী ব্যবহার করা আপনার সমস্যার সমাধান করে না, আপনি কেবল অন্যকে সমাধান করার জন্য এটি পাস করছেন।

— সিমানাস

4

ডিসেম্বর 2018 পর্যন্ত, আমি বুটস্ট্রেপসিডিএন - তে হোস্ট করা স্থিতিশীল সংস্করণটি তাদের ওয়েবসাইটে ফন্ট-অসাধারণ xx.৫০ xxd সিডিএন এর পরিবর্তে ব্যবহার করা সহজ বলে মনে করি - প্রতিবার তারা যখন ছোটখাট সংস্করণগুলি আপগ্রেড করে তখন পূর্ববর্তী সংস্করণটি ভেঙে যায়।

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

আইকনগুলি একই:

<i class="fa fa-facebook"></i>

— ehacinom
সূত্র

3

আপনার সার্ভারটি যদি আইআইএস হয় তবে ডাবল ফাইল এক্সটেনশনটি পরিবেশন করার জন্য সঠিক MIME যুক্ত করতে ভুলবেন না। সঠিক MIME হ'লapplication/octet-stream

— দারিও ব্রিগন
সূত্র

আপনি যদি আইআইএস 7 ব্যবহার করে থাকেন তবে আপনি এখানে পদ্ধতিটি অনুসরণ করতে পারেন: টেকনেট.মাইক্রোসফট.ইন- ইউস

— সিসি

3

font-weight: 900;

ফন্ট আশ্চর্যজনক 5 এর সাথে আমার একটি আলাদা সমস্যা ছিল F ফন্টআউভিজ আইকনগুলির জন্য ডিফল্ট ফন্ট-ওজন 900 হওয়া উচিত তবে আমি স্প্যান এবং আই ট্যাগের জন্য এটিকে 400 এ ওভাররাইট করেছি। এটি ঠিক কাজ করেছে, যখন আমি এটি সংশোধন করেছি।

এখানে তাদের গিথুব পৃষ্ঠায় ইস্যুটি উল্লেখ করা হয়েছে, https://github.com/FortAwesome/Font-Awesome/issues/11946

আমি আশা করি এটি কাউকে সাহায্য করবে।

— manian
সূত্র

1

আপনাকে ধন্যবাদ যে আমার সমস্যাও ছিল। আমি ফন্ট-পরিবারকে "ফন্ট অসাধারণ 5 ফ্রি" তে সেট করেছিলাম তবে ফন্ট-ওজনও 900 এ সেট করতে হবে!

— হ্যান্স ভন

3

আপনি যদি ৫. * বা তার বেশি সংস্করণ ব্যবহার করেন তবে আপনাকে এটি ব্যবহার করতে হবে

all.css বা all.min.css

কাজ fontawesome.css নেই সহ না এটা কোন সংশয়ের অবকাশ নেই webfonts ফোল্ডার এবং সেখানে @ ফন্ট-মুখ বা ফন্ট পরিবারের কোন রেফারেন্স

আপনি fontawesome.css বা fontawesome.min.css- এ ফন্ট-পরিবার সম্পত্তির কোড অনুসন্ধান করে এটি পরিদর্শন করতে পারেন

— the_haystacker
সূত্র

এটি আমার জন্য একদম সঠিক সমাধান - খুব খারাপ উত্তরটি এতদূর নীচে, আমি এটি দেখতে পাইনি এবং নিজেই এটি বের করে ফেলতে হয়েছিল

— কোল্ড_ক্লাস

2

এটি সম্ভব হতে পারে যে আপনার ফন্টের পথটি সঠিক নয় যাতে CSS ফন্টটি লোড করতে এবং আইকনগুলি রেন্ড করতে সক্ষম হয় না যাতে আপনাকে সংযুক্ত ফন্টগুলির আটকে থাকা পথ সরবরাহ করতে হবে।

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}

— SantoshK
সূত্র

2

এটি ব্যবহার করুন <i class="fa fa-camera-retro" ></i>আপনি এফ ক্লাস সংজ্ঞায়িত করেন নি

— জিতেন্দ্র ভার্শনে
সূত্র

2

সংস্করণ 5 থেকে শুরু করে, আপনি যদি এই সাইট থেকে প্যাকেজটি ডাউনলোড করেন:

https://fontawesome.com/download

হরফগুলি all.css এবং all.min.css ফাইলে রয়েছে।

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

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

— বাঁচুন ভালবাসুন
সূত্র

2

সমাধান অনুসন্ধানের জন্য এবং সরকারী দস্তাবেজগুলি সহায়ক না পাওয়ার জন্য লড়াই করার পরে, এটি আমার জন্য সমস্যাটি সমাধান করেছে:

Fontawesome.zip ডাউনলোড করুন। আমি ৫.১০.২ সংস্করণ ব্যবহার করছি এবং আমি এটি এখান থেকে পেয়েছি https://fontawesome.com/download
জিপ ফাইলের অভ্যন্তরে বেশ কয়েকটি ফোল্ডার রয়েছে You আপনার কেবল সিএসএস এবং ওয়েবফন্ট ফোল্ডার দরকার
1. আপনার ওয়েব প্রকল্পে 2 টি ফোল্ডার তৈরি করুন এবং তাদের CSS এবং ওয়েবফন্টের নাম দিন।

এই নামগুলি বাধ্যতামূলক। এখন জিপ থেকে সিএসএস এবং ওয়েবফন্টের সামগ্রী আপনার প্রকল্পের সংশ্লিষ্ট ফোল্ডারে অনুলিপি করুন। এবং যে সব!

হুঁশিয়ার হও! অসাধারণতা ব্যবহারকারীর জন্য বিষয়গুলি সহজ করে তুলছে!

— BabaNew
সূত্র

1

আমি 3.2.1 থেকে 4.0.1 এ পরিবর্তন করেছি এবং ফোল্ডারটি ফন্ট ছিল এবং এখন ফন্ট বলা হয় is

src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1');

src: url ('../ হরফ / fontawesome-webfont.eot? v = 4.0.1');

আমি আশা করি এটি কাউকে সাহায্য করবে

— আন্দ্রে ডুয়ার্টে
সূত্র

1

আমি অফিশিয়াল ফন্ট অসাধারণ SASS রুবি জহর ব্যবহার করি এবং নীচে লাইনটি আমার অ্যাপ্লিকেশন। CSS.scss এ যুক্ত করে ত্রুটিটি স্থির করেছি

@import "font-awesome-sprockets";

ব্যাখ্যা:

হরফ-অসাধারণ-স্প্রোকেটস ফাইলটিতে হ'ল স্প্রোককেটগুলি এসেইট করা হেল্পার স্যাস ফাংশনগুলি হরফ ফাইলের সঠিক পথ সন্ধান করার জন্য ব্যবহৃত হয়।

— Marklar
সূত্র

1

যদি আপনি স্যাস ব্যবহার করছেন এবং আপনার মেইন.এসএসএস এ আমদানি করে থাকেন @import '../vendor/font-awesome/scss/font-awesome.scss';

ত্রুটিটি ফন্ট-অসাধারণ.এসএসএস ফাইল থেকে আসতে পারে যা আপেক্ষিক পথে ফন্ট ফাইলগুলি সন্ধান করছে।

সুতরাং মনে রাখবেন $ এফ-ফন্ট-পাথ ভেরিয়েবলটি ওভাররাইড করুন: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

এর মতো আপনার সূচি html এ সিডিএন যুক্ত করার দরকার নেই

— vilsbole
সূত্র

1

ফন্টউইজ-অল সিএসএস ফাইলটি ডাবল চেক করুন - একেবারে নীচে ওয়েবফন্ট ফোল্ডারে যাওয়ার পথ থাকবে। মাইনের এতে "../webfouts" ফর্ম্যাট ছিল যার অর্থ সিএসএস ফাইলটি এটি যেখানে থেকে 1 স্তরের সন্ধান করবে। যেহেতু আমার সমস্ত CSS ফাইলগুলি CSS ফোল্ডারে ছিল এবং আমি ফন্টগুলি একই ফোল্ডারে যুক্ত করেছি, এটি কাজ করছে না।

আপনার ফন্ট ফোল্ডারটিকে কেবল একটি স্তরের উপরে নিয়ে যান এবং সব ঠিকঠাক হওয়া উচিত :)

ফন্ট আশ্চর্যজনক 5.0 এর সাথে পরীক্ষিত

— রস
সূত্র

এটি পছন্দসই উত্তর হওয়া উচিত কারণ এটি পুরানো ডকুমেন্টেশনের সাথে যুক্ত না করে সরাসরি প্রশ্নের উত্তর দেয়। কুডোস

— কাইল চ্যাম্পিয়ন

1

সুতার সাথে দুর্দান্ত ডাউনলোড করা ফন্টের সাথে আমার একই সমস্যাটি ছিল, আমি all.js ফাইলের সাথে min.css ফাইল ALOL যুক্ত করে দিয়েছি ।

আশা করি এটি কাউকে সাহায্য করবে

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

— এনরিক মার্টিনেজ
সূত্র

1

/Css/all.css ফাইলটিতে ফন্ট আশ্চর্যর সময় ব্যবহার করার সময় আপনার প্রয়োজনীয় স্টাইল আইটেমের আইকন শৈলীগুলি থাকে। / ওয়েবফন্ট ফোল্ডারে উপরের সিএসএসের উল্লেখ এবং নির্ভর করে এমন সমস্ত টাইপফেস ফাইল রয়েছে।

আপনার প্রকল্পের স্থিতিশীল সম্পদ ডিরেক্টরিতে (বা যেখানে আপনি সামনের প্রান্তের সম্পদ বা বিক্রেতার স্টাফ রাখতে পছন্দ করেন) পুরো / ওয়েবফন্ট ফোল্ডার এবং /css/all.css অনুলিপি করুন।

আপনি যে ফন্টটি অসাধারণ ব্যবহার করতে চান তা প্রতিটি টেম্পলেট বা পৃষ্ঠার অনুলিপি / css/all.css ফাইলের একটি উল্লেখ যুক্ত করুন।

শুধু ভিজিট করুন - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself আপনি উত্তর পাবেন।

— দিপেশ চৌহান
সূত্র

0

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

আপেক্ষিক পথে 404 কারণ হয়েছিল:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

সম্পূর্ণ পথ এটি ব্রাউজার ক্রস সমাধান করেছে:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

আপনার দরকার না হলে আমি এটি করার পরামর্শ দিচ্ছি না, তবে এটি আমার পক্ষে কাজ করে। অবশ্যই, আপনার এটি হরফ-অসাধারণ সিএসএস ফাইলের সমস্ত ফন্ট ফর্ম্যাটগুলির জন্য পুনরাবৃত্তি করা উচিত।

— টিম
সূত্র

0

এটি আমার পক্ষে কাজ করছে না কারণ Allow from noneআমার অ্যাপাচি কনফিগারেশনে মূল ডিরেক্টরিতে আমার নির্দেশ ছিল । আমি কীভাবে এটি কাজ করেছিলাম তা এখানে ...

আমার ডিরেক্টরি কাঠামো:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

যেখানে আমার সূচক html রয়েছে:

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

আমি আমার রুটে অ্যাক্সেসটিকে অস্বীকার করা চালিয়ে যেতে বেছে নিয়েছি এবং এর পরিবর্তে রুট / ফন্ট-দুর্দান্ত / এর জন্য আমার অ্যাপাচি কনফিগারেশনে অন্য ডিরেক্টরি এন্ট্রি যুক্ত করেছি /

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>

— user3325776
সূত্র