Semantic-UI某些图标不能显示+资源引入两种方式

最近搞一下前端，使用框架为semantic ui，于是乎去官网下载了zip解压引入css/js资源，结构如下：

一、本地引入资源

本地引入方式要使用图标需要两个css，引入之后发现有些图标无法正常使用（猜测可能是icon版本原因），某些图标未正常显示资源引入如下：

<link rel="stylesheet" type="text/css" href="./css/icon.min.css">
<link rel="stylesheet" type="text/css" href="./css/semantic.min.css">

Js引入：

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="./js/semantic.min.js"></script>

因此修改icon引入新版本后正常，资源引入如下：

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
<link rel="stylesheet" type="text/css" href="./css/semantic.min.css">

版本修改可以参见，也可以直接去我后面给出的cdn地址中自己查看：

将icon版本修改为最新版，可以看到这里已经正常显示我所需要的图标了。
本地方式也可参见地址:https://sourceforge.net/projects/semantic-ui.mirror/files/
如果你不想动手点一点，那么可以看一看内部结构：

二、CDN方式引入

采用cdn方式引入，只需要引入一个css即可，找到如下图官网给的cdn css样式有时候生效有时候不生效(不知道是不是网络原因)

于是乎找一下sematic ui的cdn资源引入解决：https://cdnjs.com/libraries/semantic-ui
只需要支持那些图标的版本的一个即可使用那些新版本图标了，自己又不知道哪个版本出的，所以干脆直接引入最新的：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">

Semantic-UI某些图标不能显示+资源引入两种方式相关推荐

QTextEdit详解(设置显示内容的两种方式（setPlainText/insertPlainText、滚动条自动(往下、往上)滚动……)
目录一.设置显示内容的两种方式(setPlainText/insertPlainText) 二.滚动条自动(往下.往上)滚动三.如何设置背景颜色/背景图片一.设置显示内容的两种方式(setPla ...
kubernetes创建资源的两种方式
一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令行的方式直接创建,比如: kubectl run httpd-app --image ...
k8s 创建资源的两种方式 - 每天5分钟玩转 Docker 容器技术（124）
命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1. 用 kubectl 命令直接创建,比如: kubectl run nginx-deployment --image=nginx ...
第5篇K8S创建资源的两种方式
一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令直接创建,比如: kubectl run httpd-app --image=r ...
使用mvc模式读取服务器上的文件,ASP.NET MVC之读取服务器文件资源的两种方式
初次认识asp.net mvc时,以为所有文件都需要走一遍路由,然后才能在客户端显示, 所以我首先介绍这一种方式比如说:我们在服务器上有图片: ~/resource/image/5.jpg 我们就需 ...
获取远程文章内容时,显示图片的两种方式
第一种: 通过Html.fromHtml(String,ImageGetter,tagHandler) CharSequence text = Html.fromHtml(capter, new Im ...
struts2_action获取web资源的两种方式
Ⅰ.和servelet API 解耦的方式:只能访问到有限的资源 (1)通过ActionContext的getXXX方法获取相关资源例: public class TestActionContext ...
超过一定字数显示省略号的两种方式
方法1.css <style type="text/css">.text_slice {width: 100px;display: block;overflow: hi ...
Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
Vue中引入静态资源的几种方式
最近修改一些老项目,好多组件里面引入图片的方式不太一样,总感觉自己没有好好总结过,今天有时间参考了几篇帖子,就总结一下: 在总结之前看了一下vue-cli的文档,突然感觉之前可能是我忽略它了基本没有看 ...

Semantic-UI某些图标不能显示+资源引入两种方式

一、本地引入资源

二、CDN方式引入

Semantic-UI某些图标不能显示+资源引入两种方式相关推荐

最新文章

热门文章