2016-02-29 3 views
2

я есть включают fontawesome но иконки показывают квадрат ..Как включить fontawesome в CodeIgniter

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/font-awesome.css') ?>"> 

пожалуйста, помогите мне

+0

cehck пути. –

+0

Можете ли вы использовать версию cdn? –

+0

проверить файл, убедиться, что файл существует, а затем проверить base_url, в config.php –

ответ

0

fontawesome не только один файл CSS он включает несколько файлов внутренне, так что если вы хотите сделать это в автономном режиме, вы должны поместить все файлы, связанные с удивительным шрифт как fonts или использовать онлайн-связь является лучшим вариантом

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

Ho жала на сервере

Click here to Download Font-Awesome

Распакуйте скачанный ZIP в каталог CodeIgniter. Я предположил, что вы добыли FontAwesome в плагин/шрифта устрашающий/

кодекса включить файл в представлении:

<link rel="stylesheet" type="text/css" href="<?php echo base_url('plugin/font-awesome/css/font-awesome.min.css'); ?>"> 

Использование CDN Хостинг

Просто Добавьте этот код в ваш взгляд

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

Вы думали о другой ошибке, которая может произойти? –

+1

Да. Они извлечены неправильно. Поскольку они говорят, что CDN работает нормально, но хостинг не работает. Но в последнем комментарии он сказал, что их '' $ config ['base_url'] = '' "' установлен в пустую; поэтому он обновил URL-адрес здесь. –

0

Если вы не хотите использовать cdn, вы можете это сделать.

открыть файл css (в fontawesome/css) и изменить источник URL всех файлов шрифтов.

этот блок

@font-face { 


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

в

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

Существует не разница, вы все еще можете использовать следующий код:

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

Вы также можете включить его с помощью файл CSS, добавив:

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); 
0

Попробуйте это ..

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/font-awesome.css"> 

и установить base_url в файле конфигурации, как этот

$config['base_url'] = 'http://domain.com/websiteroot/'; 
1

Вы не можете использовать base_url() или site_url() для шрифта awesome.css только из-за :

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

Soluti на 1. Если вы не хотите, чтобы скачать шрифт-удивительным, вы можете использовать:

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

Конечно, это всегда работает. Недостатком решения 1 является зависимость от интернет-соединения.

Решение 2. Прежде всего, вы должны загрузить все файлы из fontawesome (SVG, Уофф, СРВ, ...) и поместить их в папку - например, пусть имя папки будет fontawesome ,

Затем необходимо удалить следующий код из файла font-awesome.css

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

После этого вы скопировать их в <style></style> файла .html или .php, который вы хотите реализовать font-awesome. Но вы должны изменить src следующим образом:

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

и не забудьте добавить их в вашем .html, .php тоже:

<link rel="stylesheet" type="text/css" href="<?=site_url("fontawesome/font-awesome.css"); ?>" />


И в том числе glyphicon из bootstrap полностью аналогична ,

0

Во-первых, я рекомендую вам проверить ваш браузер, если есть какие-либо ошибки, нажав F12 на Chrome.

Snapshot

Убедитесь, что URL соответствует месту вы кладете шрифт устрашающей папку: например, Проект
--Application
--Assets
---- CSS
------ шрифт удивительным
-------- CSS
-------- --fontawesome.css
--system

Если путь правильно, то перейти к шрифту удивительный сайт, чтобы проверить код значка вы хотите, каждый значок, который вы выбираете, будет иметь пример того, как использовать его.

https://fontawesome.com/icons?d=gallery

Надежда, что помогает

Смежные вопросы