相关文章推荐
坏坏的山羊  ·  python 自动刷新tableau - ...·  3 月前    · 
俊逸的圣诞树  ·  10. 额外功能 · ...·  4 月前    · 
追风的牛肉面  ·  bcprov-jdk16-1.46.jar ...·  7 月前    · 

最近搞一下前端,使用框架为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,于是乎去官网下载了zip解压引入css/js资源,结构如下:一、本地引入资源本地引入方式要使用图标需要两个css,引入之后发现有些图标无法正常使用(猜测可能是icon版本原因),某些图标未正常显示资源引入如下:&lt;link rel="stylesheet" type="text/css" href="./css/icon.min.css"&gt;&lt;link rel="stylesheet" type="text/css" href="./
				
在使用Semantic-UI写前端的时候,我注意到icon并不能正常地渲染出来。 在搜索许久之后我在StackOverflow找到了这个解决方法,故分享给大家: <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
不要把semantic.css或者semantic.min.css文件单独拎出来放在static目录下!!! 不要把semantic.css或者semantic.min.css文件单独拎出来放在static目录下!!! 不要把semantic.css或者semantic.min.css文件单独拎出来放在static目录下!!! 重要的事情说三遍!!! 因为这个css文件里面有其他文件的相对路径,你单独拎出来就找不到其他文件了!!!
Semantic UI是完全语义化的前端界面开发框架,跟Bootstrap和Foundation比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。 Semantic UI 2.3.3 更新日志:2018-07-09 搜索-传入缓存:false现在将影响使用远程端点时apiSettings的默认设置,以前您还必须传递apiSettings:{cache:false};CSS-更新LESS语法以与LESS3.0兼容;图标-由于与动画中使用的转换和转换不兼容,已弃用了多个图标名称,以前的名称仍然可以使用,但建议迁移到新名称以与转换兼容。
Semantic UI—完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。Semantic UI 特点: 文档和演示非常完善易于学习和使用配备网格布局支持 Sass 和 LESS 动态样式语言有一些非常实用的附加配置,例如inverted类。对于社区贡献来说是比较开放的。有一个非常好的按钮实现,情态动词,和进度条。在许多功能上使用图标字体。Semantic UI 对浏览器的支持:Last 2 Versions FF, Chrome, IE (aka 10 )Safari 6IE 9 (Browser prefix only)Android 4Blackberry 10 标签:Semantic  CSS框架
#.settings.py中设置 STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static') STATICFILES_DIRS = [os.path.join(BAS...
React提供了一种相当科学的开发Web应用前端视图层的技术,借助于semantic-ui for React可以很容易地搭建起常用网页开发中的UI组件,但是最近在分析其提供的各种组件时发现Image组件存在一个小问题,记录于此。 我最初代码形式 import React from 'react' import { Grid, Image, } from 'semantic-...
vue框架中使用element-ui,我的vue工程是使用脚手架创建的,是个vue webpack项目。 遇到的问题是: 在vue中加入elment-ui中的图标,但是页面上没有显示。页面部分代码为: <el-menu-item i... 秘制的大白兔: *** FATAL CONFIG FILE ERROR (Redis 7.2.5) *** Reading the configuration file, at line 504 >>> 'dir ./DATA/docker/redis/data/' No such file or directory 博主,请问这个是怎么回事啊,目录是存在的,执行run之后,用户权限会变成systemd-coredump 【JVM】Jprofiler简单分析OOM 东京铁塔下……: 请问线程dump图中的闪电符合是什么意思,感谢解答 C++八股文——内存管理(堆和栈的区别? C++内存分区? 内存泄漏?如何避免?什么是智能指针?有哪些种类? 什么是野指针,怎么产⽣的,如何避免 ? 野指针和悬浮指针的区别? 内存对齐是什么?)